路由——路由导航守卫

一、路由导航守卫是什么？

二、全局前置守卫--router.beforeEach

1.流程图如下：

2.代码如下：

3.gitee代码仓库

---

前言

本篇文章主要介绍在用户登录时路由导航守卫中全局前置守卫的工作原理及过程

一、路由导航守卫是什么？

官方解释：vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

通俗一点来说，就是在路由跳转之前做判断，符合条件就放行，不符合再做其他判断处理

---

二、全局前置守卫--router.beforeEach

1.流程图如下：

---

2.代码如下：

**将流程图与代码中的注释结合起来看思路更清晰

import router from '@/router' // 导入路由
import store from '@/store' // 导入Vuex

// 白名单--不需要 token 就可以直接访问的页面 /login /regisiter /404
const whiteList = ['/login', '/404']
// 路由导航守卫
// from 来自哪
// to 要去哪
// next() 是一个函数 必须使用
// 使用: next() 直接放行  // next('/路径名') 跳转到指定页面
router.beforeEach((to, from, next) => {
  console.log('页面跳转', '从', from.path, '到', to.path)
  // 获取 Vuex里面的 token
  const token = store.state.user.token
  // 是否有 token ？
  if (token) { // 有 token
    // 是否去登录页 ？
    if (to.path === '/login') { // 去登录页
      next('/') // 回首页
      console.log('用户已经登录，不能去登录页面')
    } else { // 不去登录页
      next() // 放行
    }
  } else { // 没有 token
    // 是否去白名单 ？
    if (whiteList.includes(to.path)) { // 去白名单
      next() // 放行
    } else { // 不去白名单
      next('/login') // 去登录页
    }
  }
})

注释：

导入路由——在这里用于获取跳转路由路径

导入Vuex——在这里时用于获取存储在Vuex中token

token——注册成功的用户，后台会在数据库的users表中分配一个唯一的token值，用户登录时会验证token

白名单——不需要 token 就可以直接访问的页面       比如：/login /regisiter /404

---

3.gitee代码仓库

https://gitee.com/liulin-xiaxia/router