vue 实现token登录
Vue 实现 Token 登录
登录流程设计
用户提交登录表单后，前端将用户名和密码发送到后端验证。后端验证成功后返回一个 Token，前端保存该 Token 并在后续请求中携带。
使用 Axios 拦截器在每次请求头中添加 Token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Token 存储方案
将 Token 存储在本地 localStorage 或 sessionStorage 中：
localStorage.setItem('token', response.data.token);从存储中获取 Token：
const token = localStorage.getItem('token');路由守卫配置
在 Vue Router 中配置全局前置守卫，检查用户是否已登录：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next('/login');
} else {
next();
}
});退出登录处理
清除本地存储的 Token 并重定向到登录页：
logout() {
localStorage.removeItem('token');
this.$router.push('/login');
}Token 过期处理
在响应拦截器中检查 Token 是否过期：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('token');
router.push('/login');
}
return Promise.reject(error);
}
);完整示例代码
登录组件示例：
<template>
<form @submit.prevent="login">
<input v-model="username" placeholder="Username">
<input v-model="password" type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await axios.post('/api/login', {
username: this.username,
password: this.password
});
localStorage.setItem('token', response.data.token);
this.$router.push('/dashboard');
} catch (error) {
console.error('Login failed:', error);
}
}
}
};
</script>安全注意事项
避免将敏感信息存储在 Token 中，Token 应该是一个随机生成的字符串。确保使用 HTTPS 协议传输 Token，防止中间人攻击。定期刷新 Token 可以增加安全性。
性能优化
对于频繁的 API 请求，可以考虑实现 Token 自动刷新机制。当 Token 即将过期时，使用 refresh token 获取新的 access token，减少用户需要重新登录的次数。
