vue jwt实现
Vue 中实现 JWT 认证的步骤
安装依赖
确保项目中安装 axios 和 vue-router。若需处理 JWT，可安装 jwt-decode 解析 token：
npm install axios vue-router jwt-decode后端接口配置
后端需提供 JWT 签发和验证的接口，通常包括：
- 登录接口（返回 JWT）
- 受保护的数据接口（验证 JWT）
示例登录请求：
axios.post('/api/login', { username, password })
.then(response => {
const token = response.data.token;
localStorage.setItem('jwt', token); // 存储 token
});前端路由守卫
在 vue-router 中配置全局前置守卫，验证 token 是否存在：
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('jwt');
if (to.matched.some(record => record.meta.requiresAuth) && !token) {
next('/login');
} else {
next();
}
});请求拦截器
通过 axios 拦截器自动为请求添加 JWT：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('jwt');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Token 过期处理
拦截响应，检测 401 错误并跳转登录页：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('jwt');
router.push('/login');
}
return Promise.reject(error);
}
);解析 JWT 数据
使用 jwt-decode 获取 token 中的用户信息：
import jwtDecode from 'jwt-decode';
const token = localStorage.getItem('jwt');
const decoded = jwtDecode(token);
console.log(decoded.userId);注销功能
清除本地存储的 token 并重定向：
logout() {
localStorage.removeItem('jwt');
this.$router.push('/login');
}注意事项
- 避免将敏感信息存储在 JWT 中。
- 使用 HTTPS 防止 token 被截获。
- 设置合理的 token 过期时间。
- 考虑实现 refresh token 机制延长会话。
