vue项目中没有token进入其他页面会重置到登录页，但是有时候有的页面不需要验证token解决方法

最新推荐文章于 2026-03-06 11:22:35 发布

原创最新推荐文章于 2026-03-06 11:22:35 发布 · 5.8k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #html

收录于

vue 同时被 2 个专栏收录

54 篇文章

订阅专栏

html

17 篇文章

订阅专栏

本文介绍如何在Vue项目中实现基于token的路由权限控制，通过在路由守卫中检查token是否存在来决定用户是否能访问受保护的页面，并展示了如何配置路由以支持此功能。

1.在你的路由拦截main.js中router.beforeEach中（有的不在main.js中以我的为例）

router.beforeEach((to, from, next) => {
  var token = localStorage.getItem('token')//存储token
  if (to.meta.name) {
    document.title = to.meta.name;//路由中设置页面标题
    if (token||to.meta.nacy=='true') {//to.meta.nacy=='true'这里面的nacy就是自己在路由中设置的//不参与token验证的页面参数变量这个变量可以自己定义
          next()
    } else {
      if (to.path == '/login') {
        next()
      } else {
        next('/login')
      }
    }
  }

});

2.路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        meta: {
            name: "登陆"
        },
        component: () => import("@views/login/index.vue")
    },
    {
        path: '/XXXX',
        meta: {
            name: "页面名称",
            nacy:"true",//是否不做token验证
        },
        component: () => import("@views/XXXX/index.vue")
    },
]

完美解决