vue实现jwt
Vue 实现 JWT 认证
安装依赖
需要安装 jsonwebtoken 和 axios 来处理 JWT 和 HTTP 请求：
npm install jsonwebtoken axios生成和验证 JWT
使用 jsonwebtoken 生成和验证 token：
const jwt = require('jsonwebtoken');
const secretKey = 'your-secret-key';
// 生成 token
const token = jwt.sign({ userId: 123 }, secretKey, { expiresIn: '1h' });
// 验证 token
jwt.verify(token, secretKey, (err, decoded) => {
if (err) {
console.error('Invalid token');
} else {
console.log('Decoded token:', decoded);
}
});前端存储 Token
将 JWT 存储在 localStorage 或 sessionStorage 中：
localStorage.setItem('token', token);
const storedToken = localStorage.getItem('token');发送 Token 到后端
使用 axios 拦截器将 token 添加到请求头：
import axios from 'axios';
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
return Promise.reject(error);
});路由守卫
在 Vue Router 中使用导航守卫保护需要认证的路由：
import router from './router';
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token');
if (to.meta.requiresAuth && !token) {
next('/login');
} else {
next();
}
});后端验证
后端需要验证 JWT 的有效性，可以使用 Express 中间件：
const jwt = require('jsonwebtoken');
const secretKey = 'your-secret-key';
function authenticateToken(req, res, next) {
const token = req.headers['authorization']?.split(' ')[1];
if (!token) return res.sendStatus(401);
jwt.verify(token, secretKey, (err, user) => {
if (err) return res.sendStatus(403);
req.user = user;
next();
});
}
app.get('/protected', authenticateToken, (req, res) => {
res.json({ message: 'Protected data' });
});刷新 Token
当 token 过期时，可以使用 refresh token 获取新的 access token：
function refreshToken(refreshToken) {
return axios.post('/refresh-token', { refreshToken })
.then(response => {
localStorage.setItem('token', response.data.accessToken);
return response.data.accessToken;
});
}错误处理
处理 token 过期或无效的情况：
axios.interceptors.response.use(response => response, error => {
if (error.response.status === 401) {
// 处理 token 过期或无效
localStorage.removeItem('token');
window.location.href = '/login';
}
return Promise.reject(error);
});注销处理
清除本地存储的 token 并重定向到登录页面：
function logout() {
localStorage.removeItem('token');
window.location.href = '/login';
}以上步骤涵盖了在 Vue 中实现 JWT 认证的主要流程，包括生成、存储、发送和验证 token，以及处理 token 过期和注销。
