在項(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ò)誤路由

這里用一個(gè)空白的vue項(xiàng)目來(lái)演示一下，主要有2個(gè)頁(yè)面，分別是首頁(yè)和登錄。

訪問(wèn)首頁(yè)時(shí)，必須要登錄，否則跳轉(zhuǎn)到登錄頁(yè)面。

新建一個(gè)空白的vue項(xiàng)目，在srccomponents創(chuàng)建Login.vue

<template> <div>這是登錄頁(yè)面</div></template><script> export default { name: 'Login' }</script><style scoped></style>

修改srcrouterindex.js

import Vue from ’vue’import Router from ’vue-router’import HelloWorld from ’@/components/HelloWorld’import Login from ’@/components/Login’Vue.use(Router)const router = new Router({ mode: ’history’, //去掉url中的# routes: [ { path: ’/login’, name: ’login’, meta: { title: ’登錄’, requiresAuth: false, // false表示不需要登錄 }, component: Login }, { path: ’/’, name: ’HelloWorld’, meta: { title: ’首頁(yè)’, requiresAuth: true, // true表示需要登錄 }, component: HelloWorld }, ]})// 路由攔截，判斷是否需要登錄router.beforeEach((to, from, next) => { if (to.meta.title) { //判斷是否有標(biāo)題 document.title = to.meta.title; } // console.log('title',document.title) // 通過(guò)requiresAuth判斷當(dāng)前路由導(dǎo)航是否需要登錄 if (to.matched.some(record => record.meta.requiresAuth)) { let token = localStorage.getItem(’token’) // console.log('token',token) // 若需要登錄訪問(wèn)，檢查是否為登錄狀態(tài) if (!token) { next({ path: ’/login’, query: { redirect: to.fullPath } }) } else { next() } } else { next() // 確保一定要調(diào)用 next() }})export default router;

說(shuō)明：

在每一個(gè)路由中，加入了meta。其中requiresAuth字段，用來(lái)標(biāo)識(shí)是否需要登錄。

在router.beforeEach中，做了token判斷，為空時(shí)，跳轉(zhuǎn)到登錄頁(yè)面。

訪問(wèn)首頁(yè)

http://localhost:8080

會(huì)跳轉(zhuǎn)到

http://localhost:8080/login?redirect=%2F

效果如下：

打開(kāi)F12，進(jìn)入console，手動(dòng)寫(xiě)入一個(gè)token

localStorage.setItem(’token’, ’12345678910’)

效果如下：

再次訪問(wèn)首頁(yè)，就可以正常訪問(wèn)了。

打開(kāi)Application，刪除Local Storage里面的值，右鍵，點(diǎn)擊Clear即可

刷新頁(yè)面，就會(huì)跳轉(zhuǎn)到登錄頁(yè)面。

怎么樣，是不是很簡(jiǎn)單呢！

以上就是vue路由實(shí)現(xiàn)登錄攔截的詳細(xì)內(nèi)容，更多關(guān)于vue 登錄攔截的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！