当前位置：首页 > VUE

vue路由实现jwt

2026-02-19 11:48:01VUE

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 并重定向：

vue路由实现jwt

methods: {
  logout() {
    localStorage.removeItem('jwt_token')
    this.$router.push('/login')
  }
}

注意事项

JWT 应存储在 HttpOnly Cookie 或 localStorage 中，但需注意 XSS 风险
敏感路由需服务端二次验证 JWT
定期检查 JWT 过期时间并刷新令牌

标签: 路由 vue

分享给朋友：

vue前端分页怎么实现

前端分页实现方法在Vue中实现前端分页通常涉及数据分割和页面控制逻辑。以下是常见的实现方式：使用计算属性分页通过计算属性对数据进行切片处理： computed: { paginatedD…

vue实现发送值接受值

Vue 实现父子组件传值父组件向子组件传值（props）父组件通过 v-bind 或简写 : 向子组件传递数据。子组件通过 props 接收数据。父组件代码： <template&g…

vue实现visual

Vue 实现可视化（Visual）的常见方法在 Vue 中实现可视化通常涉及数据可视化库的集成，以下是几种主流方案：使用 ECharts ECharts 是一个强大的 JavaScript 图表…

vue实现markdown

Vue 实现 Markdown 编辑器在 Vue 中实现 Markdown 编辑器可以通过集成第三方库或自定义解析器完成。以下是两种常见方法：使用第三方库（如 marked 或 markdown…

vue实现波形

实现波形效果的方法在Vue中实现波形效果可以通过多种方式完成，常见的方法包括使用Canvas绘制、CSS动画或第三方库。以下是几种实现方案：使用Canvas绘制波形通过Canvas API动态…

vue 实现上传

Vue 实现文件上传使用 Vue 实现文件上传可以通过原生 HTML 的 <input type="file"> 或第三方库（如 axios、vue-upload-component）完…

vue路由实现jwt