vue配置全局守卫

 

简介：前置守卫 路由拦截功能开发

前置守卫⽂档： https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85

%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

router ⾥⾯配置需要登录的路由 meta : {requiresAuth: true}

main.js ⾥⾯配置路由拦截

//路由拦截，拦截全部路由，每次操作路由都是被拦截进⾏判断
router.beforeEach((to,from,next)=>{
 const token = localStorage.getItem("token");
 //筛选需要传token的路由，匹配route⾥⾯需要登录的路径，如果匹配到就是true
 if( to.matched.some(record => record.meta.requiresAuth) ){
 //根据token是否有，判断是否需要调到登录⻚⾯
 if(token){
 next()
 }else{
 next({path:'/login'})
 }
 }else{
 next();
 }
})