vue jwt实现
Vue JWT 实现方法
安装依赖
确保项目中安装了 jsonwebtoken（后端）和 axios（前端）。若使用 Vue 3，可搭配 vue-router 和 pinia（或 vuex）管理状态。
npm install jsonwebtoken axios后端生成 JWT
在后端（如 Node.js）使用 jsonwebtoken 生成 Token。示例代码：
const jwt = require('jsonwebtoken');
const secret = 'your_secret_key';
function generateToken(user) {
return jwt.sign({ id: user.id, username: user.username }, secret, { expiresIn: '1h' });
}前端存储 Token
登录成功后，将后端返回的 Token 存储到 localStorage 或 sessionStorage，并通过 axios 拦截器附加到请求头。
// 存储 Token
localStorage.setItem('jwtToken', token);
// axios 拦截器配置
axios.interceptors.request.use(config => {
const token = localStorage.getItem('jwtToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});路由守卫验证
在 Vue Router 中配置全局前置守卫，验证 Token 是否存在及有效性。
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('jwtToken');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});Token 过期处理
通过拦截响应检查 Token 是否过期，若过期则跳转到登录页。
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
localStorage.removeItem('jwtToken');
router.push('/login');
}
return Promise.reject(error);
}
);注销清除 Token
用户注销时清除存储的 Token。
function logout() {
localStorage.removeItem('jwtToken');
router.push('/login');
}注意事项
- 密钥安全：后端应妥善保管 JWT 密钥，避免泄露。
- HTTPS：生产环境务必使用 HTTPS 传输 Token。
- 短有效期：建议设置较短的 Token 有效期（如 1 小时），并通过 Refresh Token 机制续期。
