5分钟学会vue中的路由守卫

5分钟学会vue中的路由守卫

在项目开发中每一次页面的跳转或者刷新，都需要判断用户是否已经登录。后端会进行判断的，前端最好也进行一次判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：
1、to:即将要进入的目标路由对象；
2、from:当前导航即将要离开的路由对象；
3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。
  next()//直接进to 所指路由
  next(false) //中断当前路由
  next(‘route’) //跳转指定路由
  next(‘error’) //跳转错误路由

beforeEach：
路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/home',
      name: 'home',
      component: HomePage
    },
     {
        path:'*',
        redirect:'/home'
     }
  ],
})
  router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next();
  })
 export default router;

打印结果如下：


实现用户验证的代码：

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
  let isLogin = window.sessionStorage.getItem('userInfo');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

到底了！看看别的吧

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？


推荐阅读：
10分钟搞懂vuex
浅谈hooks
vue 组件设计原则
Tree Shaking 概念详解
深入解读 vue 修饰符 sync