导航守卫可以控制路由的访问权限，主要是用来监听路由的进入和离开。
当进入或离开路由组件时，可以通过导航守卫做一些拦截，实现权限登录等功能。
导航守卫分为三种：全局守卫、独享守卫、组件守卫。
参数说明：
每个导航守卫都有三个参数，全局后置守卫 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 这三个路由组件。
<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>
<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>
<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 文件中配置全局前置守卫。
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 就正常跳转。
三、使用 meta 路由元信息，配合导航守卫判断是否需要权限验证。
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
注意：meta 属性表示路由元信息，这个对象里的内容由我们来定义，用于配置一些自定义信息。
四、全局前置守卫总结
router.beforeEach((to,from,next) => { if(判断是否需要权限){ // 权限处理... }else{ next(); } })
原创作者：吴小糖
创作时间：2023.8.12
