首先我们要清楚路由导航守卫和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')
}
})