- 在配置路由中需要拦截的加上 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();
}
})
即可