路由导航守卫 - 前置导航守卫 router.beforeEach

一、导航守卫

1.什么是导航守卫？

导航守卫就是路由跳转过程中的一些钩子函数，在通过函数中通过跳转或取消的方式守卫导航。

2.导航守卫分为几种？

前置导航守卫 router.beforeEach
后置导航守卫 router.afterEach

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// to：即将要进入的目标// from：当前导航正要离开的路由// next：next 是一个函数，通常是指放行，next() 直接放行 ，next(路径) 跳转到某一个页面
})router.afterEach((to, from) => {// ...
})

二、权限拦截流程分析

用户访问页面，触发导航守卫钩子函数，然后按照如下流程进行解析。

白名单：那些不需要 token 就可以直接访问的页面，那么哪些页面不需要 token 就能够直接访问呢？

login页面
404页面

三、实现权限拦截

// 导入路由模块
import router from './router'
import store from './store'// 路由白名单：那些不需要 token 就可以直接访问的页面
const whiteList = ['/login', '/404']// 创建前置路由守卫
router.beforeEach((to, from, next) => {// 获取 tokenconst token = store.state.user.token// 判断 token 是否存在if (token) {// 是否是登录页面if (to.path === '/login') {// 如果有 token,访问登录页面,跳转到主页next('/')} else {// 如果有 token,访问不是登录页面,直接放行next()}} else {// 判断访问的路由在不在白名单if (whiteList.includes(to.path)) {// 如果没有 token,但在白名单中,则放行next()} else {// 如果没有 token,也不在白名单中,则跳转到登录页next('/login')}}
})

对于白名单的判断，使用数组的 includes() 方法，检查这个元素在数组中是否存在

includes() 方法解析

路由导航守卫 - 前置导航守卫 router.beforeEach相关推荐

vue router.beforeEach跳转路由验证用户登录状态
使用vue判断验证用户登录状态导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前 ...
vue-router进阶：路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
Vue路由守卫（导航守卫）及使用场景
目录前言一.路由守卫是什么? 二.路由守卫全解析先来看一下钩子函数执行后输出的顺序吧 1.全局路由守卫 2.组件路由守卫 3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vu ...
Vue 路由懒加载导航守卫keep-alive
懒加载组件导入方式 const Foo = () => import('./Foo.vue') const router = new VueRouter({routes: [{ path: '/ ...
vue路由第三篇-导航守卫、路由元信息、动态路由
导航守卫 1. 环境准备 1.1 安装Element-Plus npm install element-plus 1.2 注册Element-Plush 需要在 main.ts 文件中注册 impor ...
Vue路由守卫（导航守卫）
路由守卫包括全局守卫(beforeEach()).路由独享守卫(beforeEnter()).组件内守卫(beforeRouteEnter().beforeRouteLeave()) 1.全局守卫(b ...
Vue Router 组件内的守卫、导航解析流程
可以在路由组件内直接定义路由导航守卫(传递给路由配置的) 可用的配置 API beforeRouteEnter 在渲染该组件的对应路由被验证前调用. 此时不能获取组件实例 this , 因为当守卫执行 ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...
路由守卫（全局守卫，局部守卫，组件内守卫）
路由守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫全局守卫: //全局前置守卫:初始化时执行.每次路由切换前执行 router.beforeEach((to,from,next ...

路由导航守卫 - 前置导航守卫 router.beforeEach

一、导航守卫

1.什么是导航守卫？

2.导航守卫分为几种？

二、权限拦截流程分析

三、实现权限拦截

路由导航守卫 - 前置导航守卫 router.beforeEach相关推荐

最新文章

热门文章