前端根据token控制路由跳转（配置路由拦截全局前置守卫）_iframe拿到的token信息如何跳过路由钩子beforeeach

1. 在配置路由中需要拦截的加上 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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();
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

即可