導(dǎo)航守衛(wèi)可以控制路由的訪問(wèn)權(quán)限，主要是用來(lái)監(jiān)聽路由的進(jìn)入和離開。

當(dāng)進(jìn)入或離開路由組件時(shí)，可以通過(guò)導(dǎo)航守衛(wèi)做一些攔截，實(shí)現(xiàn)權(quán)限登錄等功能。

導(dǎo)航守衛(wèi)分為三種：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件守衛(wèi)。

參數(shù)說(shuō)明：

每個(gè)導(dǎo)航守衛(wèi)都有三個(gè)參數(shù)，全局后置守衛(wèi) afterEach 除外。

to 表示即將要進(jìn)入的路由對(duì)象
例如：要前往Home頁(yè)面，那么to就是Home頁(yè)面的路由信息

from 表示即將要離開的路由對(duì)象
例如：當(dāng)前在Login頁(yè)面，要前往Home頁(yè)面，那么from就是Login頁(yè)面的路由信息

next 表示是否放行
?? ??? ?next() ? ? ? ? ? ? ? ? ? ?表示放行
?? ??? ?next(false) ? ? ? ? ? ? ? 表示不放行
?? ??? ?next('/login') ? ? ? ? ? ?表示進(jìn)入Login頁(yè)面【path方式】
?? ??? ?next({name: 'login'}) ? ? 表示進(jìn)入Login頁(yè)面【name方式】

全局前置守衛(wèi)【常用】?

一、分別創(chuàng)建 Login.vue、Home.vue、About.vue 這三個(gè)路由組件。

<template>
    <div>
        <h1>Login頁(yè)面</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頁(yè)面</h1>
        <button @click="isAbout">前往About頁(yè)面</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頁(yè)面</h1>
        <button @click="isHome">前往Home頁(yè)面</button>
    </div>
</template>

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

二、在 router 目錄下的 index.js 文件中配置全局前置守衛(wèi)。

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
})

// 全局前置守衛(wèi)
// 初始化的時(shí)候會(huì)被調(diào)用、每次路由切換之前會(huì)被調(diào)用
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 頁(yè)面或 About.vue 頁(yè)面，就會(huì)判斷是否有 uid，如果沒(méi)有就前往 Login.vue 頁(yè)面，如果有 uid 就正常跳轉(zhuǎn)。

三、使用 meta?路由元信息，配合導(dǎo)航守衛(wèi)判斷是否需要權(quán)限驗(yàn)證。

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表示需要權(quán)限
    meta:{ isAuth: true }
  },
  {
    path: '/about',
    name: 'about',
    component: About,
    // 自定義信息，isAuth為true表示需要權(quán)限
    meta:{ isAuth: true }
  },{
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

// 全局前置守衛(wèi)
// 初始化的時(shí)候會(huì)被調(diào)用、每次路由切換之前會(huì)被調(diào)用
router.beforeEach((to,from,next) => {
  // 判斷是否需要權(quán)限
  if(to.meta.isAuth){
    if(sessionStorage.getItem('uid')){
      next();
    }else{
      next('/login');
    }
  }else{
    next();
  }
})

export default router

注意：meta?屬性表示路由元信息，這個(gè)對(duì)象里的內(nèi)容由我們來(lái)定義，用于配置一些自定義信息。

四、全局前置守衛(wèi)總結(jié)

router.beforeEach((to,from,next) => {
  if(判斷是否需要權(quán)限){
    // 權(quán)限處理...
  }else{
    next();
  }
})

原創(chuàng)作者：吳小糖

創(chuàng)作時(shí)間：2023.8.12文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-645492.html

到了這里，關(guān)于Vue 導(dǎo)航守衛(wèi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！