路由拦截和路由守卫

在vue中，为确保用户登录，使用路由拦截器或者路由守卫判断登录状态，并判断和处理情况。     路由守卫是什么？ 官方文档的解释是：  

 可以用router.beforeEach注册一个路由守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

   注:这是一个全局路由，守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。   而三个参数分别是什么意思呢？  

路由导航守卫

to代表我们将要访问的路径

from代表我们从哪个页面路径跳转而来

next代表放行的函数

 

 下面用几个案例展示：

案例一：

//为路由对象，添加before 导航守卫

router.beforeEach((to,from,next)=>{

 // 如果用户访问的登录页，直接放行

  if(to.path==='/login') return next()

   //从sessionStorage中获取到保存的token值

  const tokenStr=window.sessionStorage.getItem('token')

   //没有token，强制跳转到登录页

if(!tokenStr) return next('/login')

 next()

})

案例二：

router.beforeEach((to, from, next) => {     if (to.meta.istoken == true) {         router.push('/目标地址')         return     }     next() }) {             path: '/edit',             component: edit,             meta: {                 istoken: true             } },       案例三： 思路：【   如果（即将进入的这个路由需要权限才能进入）{         如果(能获取到这个老哥的userID){                 就让这个老哥进入这个路由          }否则{                 就让这个老哥进入b这个页面         }  }即将进入的路由不需要权限就能进入{        就让这个老哥进入这个路由  } 】 对应代码： import store from '@/assets/store' //把这个userId获取过来 router.beforeEach((to,from,next)=>{       if(to.meta.requireAuth){            if(store.state.userId){              next()            }else{              next({path:'/b'})           }       }else{              next()        } })