vue路由实现jwt
Vue 路由实现 JWT 认证
安装依赖
确保项目中已安装 vue-router 和用于 JWT 处理的库（如 jsonwebtoken 或 jwt-decode）。通过以下命令安装：
npm install vue-router jwt-decode配置路由守卫
在 router/index.js 中设置全局前置守卫，拦截路由跳转并验证 JWT：
import Vue from 'vue'
import Router from 'vue-router'
import jwt_decode from 'jwt-decode'
Vue.use(Router)
const router = new Router({
routes: [...]
})
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('jwt_token')
const isAuthRequired = to.matched.some(route => route.meta.requiresAuth)
if (isAuthRequired) {
if (token) {
try {
const decoded = jwt_decode(token)
const isExpired = decoded.exp < Date.now() / 1000
isExpired ? next('/login') : next()
} catch (error) {
next('/login')
}
} else {
next('/login')
}
} else {
next()
}
})
export default router路由元信息配置
在路由定义中标记需要认证的页面：
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}登录逻辑
在登录页面中，成功获取 JWT 后存储至本地并跳转：
methods: {
async handleLogin() {
const res = await api.login(this.credentials)
localStorage.setItem('jwt_token', res.data.token)
this.$router.push('/dashboard')
}
}请求拦截
在 axios 拦截器中自动附加 JWT：
axios.interceptors.request.use(config => {
const token = localStorage.getItem('jwt_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})退出处理
清除本地存储的 JWT 并重定向：
methods: {
logout() {
localStorage.removeItem('jwt_token')
this.$router.push('/login')
}
}注意事项
- JWT 应存储在
HttpOnlyCookie 或localStorage中，但需注意 XSS 风险 - 敏感路由需服务端二次验证 JWT
- 定期检查 JWT 过期时间并刷新令牌
