vue路由守衛(wèi)如何限制前端頁面訪問權(quán)限
這篇文章主要介紹vue路由守衛(wèi)如何限制前端頁面訪問權(quán)限，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司主營麥蓋提網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),麥蓋提h5小程序制作搭建,麥蓋提網(wǎng)站營銷推廣歡迎麥蓋提等地區(qū)企業(yè)咨詢
首先需要寫一個路由守衛(wèi)，它的原理是每次路由發(fā)生變化時觸發(fā)具體寫法如下：
router.beforeEach((to, from, next) => {
next()
})beforeEach函數(shù)有三個參數(shù)：
to:即將進(jìn)入的路由對象
from:當(dāng)前導(dǎo)航即將離開的路由
next,進(jìn)行管道中的一個鉤子，如果執(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對象，最后export暴露出去
router.beforeEach 在每次路由跳轉(zhuǎn)出發(fā)
let token = localStorage.getItem('token') 獲取本地沒有沒token 如果沒有就跳到login頁面 很簡單的邏輯
以上是“vue路由守衛(wèi)如何限制前端頁面訪問權(quán)限”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文名稱：vue路由守衛(wèi)如何限制前端頁面訪問權(quán)限
鏈接地址：http://www.chinadenli.net/article30/jdhppo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、Google、標(biāo)簽優(yōu)化、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
