【Vue】路由导航守卫实现项目页面权限管理原理

首先我们要清楚路由导航守卫和axios拦截器的区别，它们是两个不同的东西。

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 : axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如登录注册页可以无条件跳转。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)

 

• 1.什么是路由导航守卫？ ： 通俗来讲，就是路由跳转的时候需要执行的一个回调函数

  • 路由导航：就是路由跳转的意思

  • 守卫：类似于门卫，你做某件事之前会对你进行一个检查

• 2.为什么要有路由导航守卫

  • 在项目开发中，并不是每一个路由跳转都是明确的。 例如很多页面跳转需要登录判断，如果你有登录，则跳转到指定页面，没有登录则跳转到登录页面。

    • 举例子：我想进小区(个人信息)，门卫（导航守卫）会检查我有没有做核酸(是否登录)，如果做了就让我进去（跳转个人信息）。没做就让我去核酸点（登录页面）做完核算才可以进去。

• 3.路由导航守卫有哪些？

  • 前置守卫：跳转前执行

  • 后置勾子：跳转后执行

• 导航守卫语法介绍(导航守卫需要创建完路由对象之后才能使用)：

  • 一定要注意，在导航守卫中必须要调用next()否则你的路由无法跳转

 基本登录注册守卫原理:

// 路由守卫
const whiteList = ['/login', '/register']// 白名单,无需权限也可访问
router.beforeEach((to, from, next) => {
  /* must call `next` */
  // 获取本地token
  const token = getToken()
  // 判断是否有token或者访问的页面是否为白名单 如果是直接放行 否则没有token且访问的非白名单页面则提示登录并跳转登录页
  if (token || whiteList.includes(to.path)) {
    next()
  } else {
    Toast.fail('请先登录')
    next('/login')
  }
})