vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
今天給大家寫一篇關(guān)于vue校驗(yàn)登錄狀態(tài)，如果是非法登錄就跳轉(zhuǎn)到登錄頁面的邏輯
首先需要寫一個(gè)路由守衛(wèi)，它的原理是每次路由發(fā)生變化時(shí)觸發(fā)具體寫法如下：
router.beforeEach((to, from, next) => {
next()
})
beforeEach函數(shù)有三個(gè)參數(shù)：
to:即將進(jìn)入的路由對(duì)象
from:當(dāng)前導(dǎo)航即將離開的路由
next,進(jìn)行管道中的一個(gè)鉤子，如果執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）；否則為false，終止導(dǎo)航。
使用案例
限制登陸功能，具體實(shí)現(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
}
]
})
//下面是重點(diǎn)
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對(duì)象，最后export暴露出去
router.beforeEach 在每次路由跳轉(zhuǎn)出發(fā)
let token = localStorage.getItem('token') 獲取本地沒有沒token 如果沒有就跳到login頁面 很簡單的邏輯
以上這篇vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了深入理解Vue 的條件渲染和列表渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了詳細(xì)介紹解決vue和jsp結(jié)合的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue-seamless-scroll無縫滾動(dòng)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無縫滾動(dòng)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建過程
Mock.js是一個(gè)模擬數(shù)據(jù)的生成器，用來幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來提高自動(dòng)化測(cè)試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue 使用post/get 下載導(dǎo)出文件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
最近開發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入在表格的需求,所以下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)入處理Excel表格功能步驟的相關(guān)資料,需要的朋友可以參考下2022-07-07
本文講述了"v-deep"深度選擇器被廢棄的情況,作者提醒讀者更新知識(shí)庫,避免誤導(dǎo)他人,深度選擇器是HTML5的新屬性,用于實(shí)現(xiàn)組件私有化和防止樣式污染,如果想讓樣式中的一個(gè)選擇器作用得更深,可以使用深度選擇器,但現(xiàn)在,以前的寫法已不再支持,需要調(diào)整方法2024-10-10
Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解
這篇文章主要介紹了Vue源碼之關(guān)于vm.$delete()/Vue.use()內(nèi)部原理詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Vue 提供了一個(gè)強(qiáng)大的過渡系統(tǒng),可以用于在進(jìn)入、離開和列表渲染時(shí)添加各種動(dòng)畫效果,這些過渡不僅能夠提升用戶體驗(yàn),還能使界面更加生動(dòng)和吸引人,本文將介紹 Vue 中實(shí)現(xiàn)過渡效果的基本方法,并提供使用 setup 語法糖的代碼示例,需要的朋友可以參考下2024-09-09