vue 实现基于 token
基于 Token 的认证实现（Vue）
在 Vue 中实现基于 Token 的认证通常涉及前端与后端的协作，以下是关键步骤和代码示例：
登录获取 Token
通过 API 发送用户凭证（如用户名/密码）到后端，接收并存储返回的 Token：
// 在登录方法中
axios.post('/api/login', {
username: 'user',
password: 'pass'
})
.then(response => {
const token = response.data.token;
localStorage.setItem('authToken', token); // 存储到本地
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`; // 设置请求头
})
.catch(error => console.error('登录失败', error));请求拦截器
通过 axios 拦截器自动为每个请求添加 Token：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('authToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => Promise.reject(error));路由守卫
使用 Vue Router 的导航守卫保护需要认证的路由：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('authToken');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // 跳转到登录页
} else {
next();
}
});在路由配置中标记需要认证的路由：
{
path: '/dashboard',
meta: { requiresAuth: true }
}Token 过期处理
拦截响应，处理 Token 过期情况：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('authToken'); // 清除无效 Token
router.push('/login'); // 重定向到登录
}
return Promise.reject(error);
}
);刷新 Token（可选）
若后端支持 Token 刷新，可在过期时自动获取新 Token：
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axios.post('/api/refresh-token', { refreshToken })
.then(({ data }) => {
localStorage.setItem('authToken', data.token);
originalRequest.headers.Authorization = `Bearer ${data.token}`;
return axios(originalRequest);
});
}关键注意事项
-
安全存储：避免使用
localStorage存储敏感信息，生产环境建议结合 HttpOnly Cookie。 -
HTTPS：确保所有通信通过 HTTPS 加密。
-
注销处理：清除本地 Token 并重置请求头：
function logout() { localStorage.removeItem('authToken'); delete axios.defaults.headers.common['Authorization']; }
通过以上步骤，可在 Vue 应用中实现完整的基于 Token 的认证流程。实际开发时需根据后端 API 规范调整字段名称和逻辑。
