Vue 导航守卫

导航守卫可以控制路由的访问权限，主要是用来监听路由的进入和离开。

当进入或离开路由组件时，可以通过导航守卫做一些拦截，实现权限登录等功能。

导航守卫分为三种：全局守卫、独享守卫、组件守卫。

参数说明：

每个导航守卫都有三个参数，全局后置守卫 afterEach 除外。

to 表示即将要进入的路由对象
例如：要前往Home页面，那么to就是Home页面的路由信息

from 表示即将要离开的路由对象
例如：当前在Login页面，要前往Home页面，那么from就是Login页面的路由信息

next 表示是否放行
        next()                    表示放行
        next(false)               表示不放行
        next('/login')            表示进入Login页面【path方式】
        next({name: 'login'})     表示进入Login页面【name方式】

全局前置守卫【常用】 

一、分别创建 Login.vue、Home.vue、About.vue 这三个路由组件。

二、在 router 目录下的 index.js 文件中配置全局前置守卫。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  },{
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守卫
// 初始化的时候会被调用、每次路由切换之前会被调用
router.beforeEach((to,from,next) => {
  if(to.name === 'home' || to.name === 'about'){
    if(sessionStorage.getItem('uid')){
      next();
    }else{
      next('/login');
    }
  }else{
    next();
  }
})

export default router

备注：以上表示如果前往 Home.vue 页面或 About.vue 页面，就会判断是否有 uid，如果没有就前往 Login.vue 页面，如果有 uid 就正常跳转。

三、使用 mate 路由元信息，配合导航守卫判断是否需要权限验证。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    // 自定义信息，isAuth为true表示需要权限
    meta:{ isAuth: true }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    // 自定义信息，isAuth为true表示需要权限
    meta:{ isAuth: true }
  },{
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守卫
// 初始化的时候会被调用、每次路由切换之前会被调用
router.beforeEach((to,from,next) => {
  // 判断是否需要权限
  if(to.meta.isAuth){
    if(sessionStorage.getItem('uid')){
      next();
    }else{
      next('/login');
    }
  }else{
    next();
  }
})

export default router

注意：mate 属性表示路由元信息，这个对象里的内容由我们来定义，用于配置一些自定义信息。

四、全局前置守卫总结

router.beforeEach((to,from,next) => {
  if(判断是否需要权限){
    // 权限处理...
  }else{
    next();
  }
})

原创作者：吴小糖

创作时间：2023.8.12