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 这三个路由组件。

html 复制代码

<template>
    <div>
        <h1>Login页面</h1>
        <button @click="isHome">登录</button>
    </div>
</template>

<script>
export default {
    name: "Login",
    methods: {
        isHome() {
            sessionStorage.setItem('uid', 10);
            this.$router.push('/');
        }
    }
}
</script>

html 复制代码

<template>
    <div>
        <h1>Home页面</h1>
        <button @click="isAbout">前往About页面</button>
        <br /><br />
        <button @click="isBack">退出登录</button>
    </div>
</template>

<script>
export default {
    name: "Home",
    methods: {
        isAbout() {
            this.$router.push('/about');
        },
        isBack() {
            sessionStorage.removeItem('uid');
            this.$router.push('/login');
        }
    }
}
</script>

html 复制代码

<template>
    <div>
        <h1>About页面</h1>
        <button @click="isHome">前往Home页面</button>
    </div>
</template>

<script>
export default {
    name: "About",
    methods: {
        isHome() {
            this.$router.push('/');
        }
    }
}
</script>

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

javascript 复制代码

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 路由元信息，配合导航守卫判断是否需要权限验证。

javascript 复制代码

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 属性表示路由元信息，这个对象里的内容由我们来定义，用于配置一些自定义信息。

四、全局前置守卫总结

javascript 复制代码

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

原创作者：吴小糖

创作时间：2023.8.12