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