vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
今天給大家寫一篇關(guān)于vue校驗登錄狀態(tài)，如果是非法登錄就跳轉(zhuǎn)到登錄頁面的邏輯
首先需要寫一個路由守衛(wèi)，它的原理是每次路由發(fā)生變化時觸發(fā)具體寫法如下：
router.beforeEach((to, from, next) => {
next()
})
beforeEach函數(shù)有三個參數(shù)：
to:即將進入的路由對象
from:當前導(dǎo)航即將離開的路由
next,進行管道中的一個鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認的）；否則為false，終止導(dǎo)航。
使用案例
限制登陸功能，具體實現(xiàn)思路：每次跳轉(zhuǎn)路由是判斷本地 localStorage.getItem('token') 狀態(tài)
首先找到router/index.js如下
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'login',
component: login
}
]
})
//下面是重點
router.beforeEach((to, from, next) => {
let token = localStorage.getItem('token')
if (to.path == '/login') {
next()
} else {
if (token == '' || token == null) {
next('/login');
} else {
next()
}
}
})
export default router;
解釋：index.js寫成如上形式，用const router 接受 new Router對象，最后export暴露出去
router.beforeEach 在每次路由跳轉(zhuǎn)出發(fā)
let token = localStorage.getItem('token') 獲取本地沒有沒token 如果沒有就跳到login頁面 很簡單的邏輯
以上這篇vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
隨著現(xiàn)在vue3越來越普及，相應(yīng)的面試題也多了起來。說到vue3的面試題，有一個最經(jīng)典的就是對于實現(xiàn)ref和reactive這兩個方法的底層原理，本文就來和大家簡單講講吧2023-04-04
Vue.js目前已經(jīng)更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧2017-10-10
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
vue watch如何深度監(jiān)聽數(shù)組每一項的變化
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue使用axios導(dǎo)出后臺返回的文件流為excel表格詳解
這篇文章主要介紹了vue使用axios導(dǎo)出后臺返回的文件流為excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了Vue 表單控件綁定的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Nginx(engine x)是一個高性能的HTTP和反向代理web服務(wù)器,是部署前端項目的首選,這篇文章主要給大家介紹了關(guān)于Vue項目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue?watch報錯:Error?in?callback?for?watcher?"xxx&qu
這篇文章主要給大家介紹了關(guān)于vue?watch報錯:Error?in?callback?for?watcher?“xxx“:“TypeError:Cannot?read?properties?of?undefined的解決方法,需要的朋友可以參考下2023-03-03