页面访问拦截
目标:基于全局前置守卫,进行页面访问拦截处理
说明:对于一个项目来说,大部分的页面,游客都可以直接访问,如遇到需要登录才能进行的操作,提示并跳转到登录,但是:对于支付页,订单页等,必须是登录的用户才能访问,游客不能进入该页面,需要做拦截处理
路由导航守卫-全局前置守卫
- 所有的路由一旦被匹配到,都会先经过全局前置守卫
- 只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面内容
访问权限页面时,拦截或放行的关键点:用户是否有登录权证token
官网vue3:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
官网vue2:https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html
语法:
router.beforeEach((to,from,next)=>{
// 1.to 往哪里去, 到哪去的路由信息对象
// 2.from 从哪里来,从哪里来的路由信息对象
// 3.next() 是否放行
// 3.1 如果next()调用,就是放行
// 3.2 next(路径) 拦截到某个路径页面
})
步骤:
- 跳转路由
- 全局前置守卫
- 是否访问权限页面
- 非权限页面 直接放行
- 是权限页面 判断是否有token,有就放行 ,没有就拦截到登录
代码:
// 定义一个数组,专门用户存放所有权限访问的页面
const authUrls = ['/pay', '/myorder']
// 全局前置导航守卫
// 所有的路由在真正访问到之前,都会先经过全局前置守卫
// 只有全局前置守卫放行了,才会到达对应的页面
router.beforeEach((to, from, next) => {
// 1.to 往哪里去, 到哪去的路由信息对象
// 2.from 从哪里来,从哪里来的路由信息对象
// 3.next() 是否放行
// 3.1 如果next()调用,就是放行
// 3.2 next(路径) 拦截到某个路径页面
// 看 to.path 是否在authUrls 中出现过
if (!authUrls.includes(to.path)) {
// 非权限页面,直接放行
next()
}
// 这里是权限页面,需要判断token
// 从vuex中获取 用户的token信息
const token = store.getters.token
if (token === null || token === '') {
next('/login')
}
next()
})
标签:Vue,next,守卫,token,放行,拦截,路由,页面
From: https://www.cnblogs.com/zgf123/p/17853610.html