Vue中的全局导航守卫实例分析

这篇文章主要介绍“Vue中的全局导航守卫实例分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中的全局导航守卫实例分析”文章能帮助大家解决问题。

全局导航守卫(beforeEach、afterEach)

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

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

导航钩子有3个参数

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

beforeEach

实现用户验证的代码：

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);
})

全局导航守卫是干什么的？

应用场景： 登录页面防止用户页面直接在地址栏中可以访问其他页面；

背景： 在 地址栏当中输入地址可以访问其他页面；然而我们需要一个系统当中来进行拦截；

那就是全局导航守卫来进行拦截， 用vue-Router 实例的方法来实现的；

1.在router中的index.js文件里引入vue-router

import Router from 'vue-router'
Vue.use(Router)

2.创建路由实例

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

3.挂载全局导航守卫

//全局路由前置守卫 --路由拦截
router.beforeEach((to, from, next) => {
  // to  将要前往的路由
  //from 从哪个路由过来的
  //next(path) 是一个函数  表示继续执行下一步，强制执行前往的path 路由
 
  //如果前往login 页面  则不需要token 直接进入就可以
  if (to.path === "/login") return next();
 
  //获取token
  const TOKEN = window.sessionStorage.getItem("TOKEN");
  if (!TOKEN) {
    //token 不存在  name 意味着 没有进行登录  返回登录页面
    next({ path: "/login" });
  }
  //已经 存在TOKEN  name 就可以进行
  next();
});

关于“Vue中的全局导航守卫实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。