路由——路由导航守卫

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

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

1.流程图如下：

2.代码如下：

3.gitee代码仓库

---

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

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

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

---

二、全局前置守卫--router.beforeEach 1.流程图如下：

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

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

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

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

---

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') // 去登录页
    }
  }
})

---

3.gitee代码仓库

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