關(guān)于Vue中的全局導(dǎo)航守衛(wèi)(beforeEach、afterEach)

更新時(shí)間：2022年07月28日 10:03:31 作者：YaaLee_

這篇文章主要介紹了關(guān)于Vue中的全局導(dǎo)航守衛(wèi)(beforeEach、afterEach)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

全局導(dǎo)航守衛(wèi)(beforeEach、afterEach)

在項(xiàng)目開(kāi)發(fā)中每一次路由的切換或者頁(yè)面的刷新都需要判斷用戶是否已經(jīng)登錄，前端可以判斷，后端也會(huì)進(jìn)行判斷的，我們前端最好也進(jìn)行判斷。

vue-router 提供了導(dǎo)航鉤子:全局前置導(dǎo)航鉤子 beforeEach 和全局后置導(dǎo)航鉤子 afterEach，他們會(huì)在路由即將改變前和改變后進(jìn)行觸發(fā)。所以判斷用戶是否登錄需要在 beforeEach 導(dǎo)航鉤子中進(jìn)行判斷。

導(dǎo)航鉤子有3個(gè)參數(shù)

1、to:即將要進(jìn)入的目標(biāo)路由對(duì)象；

2、from:當(dāng)前導(dǎo)航即將要離開(kāi)的路由對(duì)象；

3、next ：調(diào)用該方法后，才能進(jìn)入下一個(gè)鉤子函數(shù)（afterEach）。

next()//直接進(jìn)to 所指路由
next(false) //中斷當(dāng)前路由
next('route') //跳轉(zhuǎn)指定路由
next('error') //跳轉(zhuǎn)錯(cuò)誤路由

beforeEach

實(shí)現(xiàn)用戶驗(yàn)證的代碼：

router.beforeEach((to, from, next) => {
? ? ? //我在這里模仿了一個(gè)獲取用戶信息的方法
? ?let isLogin = window.sessionStorage.getItem('userInfo');
? ? ? if (isLogin) {
? ? ? ? ? //如果用戶信息存在則往下執(zhí)行。
? ? ? ? ? next()
? ? ? } else {
? ? ? ? ? //如果用戶token不存在則跳轉(zhuǎn)到login頁(yè)面
? ? ? ? ? if (to.path === '/login') {
? ? ? ? ? ? ?next()
? ? ? ? ?} else {
? ? ? ? ? ? ?next('/login')
? ? ? ? ?}
? ? ?}?
?})

afterEach

和 beforeEach 不同的是 afterEach 不接收第三個(gè)參數(shù) next 函數(shù)，也不會(huì)改變導(dǎo)航本身，一般 beforeEach 用的最多，afterEach 用的少

router.afterEach((to,from)=>{ //這里不接收next
? ? console.log(to);
? ? console.log(from);
})

全局導(dǎo)航守衛(wèi)是干什么的？

應(yīng)用場(chǎng)景：登錄頁(yè)面防止用戶頁(yè)面直接在地址欄中可以訪問(wèn)其他頁(yè)面；

背景：在地址欄當(dāng)中輸入地址可以訪問(wèn)其他頁(yè)面；然而我們需要一個(gè)系統(tǒng)當(dāng)中來(lái)進(jìn)行攔截；

那就是全局導(dǎo)航守衛(wèi)來(lái)進(jìn)行攔截，用vue-Router 實(shí)例的方法來(lái)實(shí)現(xiàn)的；

1.在router中的index.js文件里引入vue-router

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

2.創(chuàng)建路由實(shí)例

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

3.掛載全局導(dǎo)航守衛(wèi)

//全局路由前置守衛(wèi) --路由攔截
router.beforeEach((to, from, next) => {
  // to  將要前往的路由
  //from 從哪個(gè)路由過(guò)來(lái)的
  //next(path) 是一個(gè)函數(shù)  表示繼續(xù)執(zhí)行下一步，強(qiáng)制執(zhí)行前往的path 路由
 
  //如果前往login 頁(yè)面  則不需要token 直接進(jìn)入就可以
  if (to.path === "/login") return next();
 
  //獲取token
  const TOKEN = window.sessionStorage.getItem("TOKEN");
  if (!TOKEN) {
    //token 不存在  name 意味著 沒(méi)有進(jìn)行登錄  返回登錄頁(yè)面
    next({ path: "/login" });
  }
  //已經(jīng) 存在TOKEN  name 就可以進(jìn)行
  next();
});

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: