路由拦截和路由守卫

在vue中，为确保用户登录，使用路由拦截器或者路由守卫判断登录状态，并判断和处理情况。

路由守卫是什么？

官方文档的解释是：

 

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

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

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

 注:这是一个全局路由，守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

而三个参数分别是什么意思呢？

路由导航守卫

1. to代表我们将要访问的路径
2. from代表我们从哪个页面路径跳转而来
3. 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() 
      }
})

总结：

路由拦截和路由守卫是前端开发中常见的概念，特别是在使用Vue.js等框架时。它们的主要作用是在路由跳转过程中添加一些逻辑判断或操作，以确保应用的正确性和安全性。

路由拦截通常用于在路由跳转前进行一些判断或处理，例如检查用户是否登录、是否有权限访问某个页面等。当满足某些条件时，路由拦截会阻止用户跳转到目标页面，并可能进行其他操作，如重定向到登录页面或显示错误提示。

而路由守卫则可以看作是一种更广义的路由控制机制。它不仅包括路由跳转前的判断，还包括跳转后的处理以及组件内的路由控制。路由守卫可以在全局、单个路由独享以及组件内部三个层次进行设置。全局路由守卫会对所有路由生效，而单个路由独享守卫和组件内部守卫则分别针对特定的路由或组件进行控制。

具体来说，路由守卫和路由拦截都包含一系列的钩子函数，这些函数会在路由的不同阶段被调用。例如，在全局路由守卫中，beforeEach钩子会在路由跳转前被调用，而afterEach钩子则会在跳转后被调用。在这些钩子函数中，我们可以添加自定义的逻辑，如检查用户状态、加载数据等。

总的来说，路由拦截和路由守卫都是用于控制路由跳转的重要机制，它们可以帮助我们在前端应用中实现更复杂的路由控制和逻辑判断。通过合理使用这些机制，我们可以确保应用的正确性和安全性，提升用户体验。