前端根据token控制路由跳转（配置路由拦截全局前置守卫）

最新推荐文章于 2024-04-07 16:19:42 发布

原创最新推荐文章于 2024-04-07 16:19:42 发布

· 1k 阅读

2 ·

版权

文章标签：

#vue

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中实现路由权限控制，通过在路由配置中添加`meta.requiresAuth`字段，并在`main.js`中设置全局前置守卫，根据本地存储的token判断用户是否已登录，从而决定是否允许访问特定路由。未登录用户将被重定向到登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在配置路由中需要拦截的加上 meta:{ requiresAuth : true}

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    name:"Home",

     component : ()=>import("../views/Home/Home.vue")
    meta:{ requiresAuth : true}
  },
  ]

const router = new VueRouter({
  routes
})

export default router

2.然后在main.js中配置路由拦截加入全局前置守卫，加入如下代码

//路由拦截，拦截全部路由，每次操作路由都是被拦截进行判断
//router.beforeEach 注册一个全局前置守卫
//to:  即将要进入的目标 路由对象;
//next:一定要调用该方法来 resolve 这个钩子
//from: 当前导航正要离开的路由;
router.beforeEach((to,from,next)=>{
  const token=localStorage.getItem("token");//从vuex拿到对应token
  //筛选需要传token的路由，匹配route里面需要登录的路径，如果匹配到就是true
  //to:去哪一个路由
  //遍历 $route.matched 来检查路由记录中的 meta 字段。
  //some() 方法测试数组中的某些元素是否通过了指定函数的测试。
  if(to.matched.some(record => record.meta.requiresAuth)){
    //根据token是否有，判断是否需要跳转到登录页面
    if(token){//如果token有
      next()
    }else{
      next({path:'/login'})
    }
  }else{
    next();
  }

})

即可