vue实现制动登录功能
实现 Vue 自动登录功能
自动登录功能通常通过结合本地存储（如 localStorage）和 Vue 的状态管理（如 Vuex 或 Pinia）来实现。以下是实现步骤：
使用 localStorage 存储 token
在用户登录成功后，将 token 存储到 localStorage 中，以便下次访问时自动验证。
// 登录成功后保存 token
localStorage.setItem('authToken', response.data.token);检查 token 是否存在
在应用初始化时（如 App.vue 或路由守卫中），检查 localStorage 是否存在 token。如果存在，则自动登录。
// 在 Vue 应用的入口文件或路由守卫中
const token = localStorage.getItem('authToken');
if (token) {
// 调用自动登录接口验证 token 有效性
axios.get('/api/validate-token', {
headers: { Authorization: `Bearer ${token}` }
}).then(response => {
// 验证成功，更新用户状态
store.commit('setUser', response.data.user);
}).catch(error => {
// 验证失败，清除无效 token
localStorage.removeItem('authToken');
});
}结合 Vuex/Pinia 管理登录状态
使用 Vuex 或 Pinia 存储用户登录状态，确保全局可用。
// Vuex 示例
const store = new Vuex.Store({
state: {
user: null,
isAuthenticated: false
},
mutations: {
setUser(state, user) {
state.user = user;
state.isAuthenticated = true;
},
logout(state) {
state.user = null;
state.isAuthenticated = false;
localStorage.removeItem('authToken');
}
}
});路由守卫控制访问权限
通过 Vue Router 的路由守卫，限制未登录用户访问受保护的路由。
// 路由配置示例
router.beforeEach((to, from, next) => {
const isAuthenticated = store.state.isAuthenticated;
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if (requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});自动登录的优化
- 设置 token 过期时间：在 token 中嵌入过期时间，避免长期无效存储。
- 刷新 token：在 token 快过期时，通过 refresh token 获取新 token。
- 安全存储：敏感数据建议使用
sessionStorage或加密存储。
// 示例：检查 token 过期时间
const tokenExpiry = localStorage.getItem('tokenExpiry');
if (tokenExpiry && new Date().getTime() > parseInt(tokenExpiry)) {
localStorage.removeItem('authToken');
}注意事项
- 安全性：避免在
localStorage中存储敏感信息，如密码。 - HTTP Only Cookie：对于生产环境，建议使用 HTTP Only Cookie 存储 token，防止 XSS 攻击。
- 服务端验证：自动登录时务必在服务端验证 token 有效性。
以上方法实现了基本的自动登录功能，可根据实际需求调整细节。
