欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue路由守衛(wèi),限制前端頁(yè)面訪問(wèn)權(quán)限的例子

 更新時(shí)間：2019年11月11日 17:12:22   作者：別把代碼當(dāng)飯吃  
今天小編就為大家分享一篇vue路由守衛(wèi),限制前端頁(yè)面訪問(wèn)權(quán)限的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

今天給大家寫一篇關(guān)于vue校驗(yàn)登錄狀態(tài)，如果是非法登錄就跳轉(zhuǎn)到登錄頁(yè)面的邏輯

首先需要寫一個(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)航即將離開(kāi)的路由

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') 獲取本地沒(méi)有沒(méi)token 如果沒(méi)有就跳到login頁(yè)面 很簡(jiǎn)單的邏輯

以上這篇vue路由守衛(wèi),限制前端頁(yè)面訪問(wèn)權(quán)限的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 深入詳解Vue3 ref底層實(shí)現(xiàn)原理

    深入詳解Vue3 ref底層實(shí)現(xiàn)原理

    隨著現(xiàn)在vue3越來(lái)越普及，相應(yīng)的面試題也多了起來(lái)。說(shuō)到vue3的面試題，有一個(gè)最經(jīng)典的就是對(duì)于實(shí)現(xiàn)ref和reactive這兩個(gè)方法的底層原理，本文就來(lái)和大家簡(jiǎn)單講講吧
    2023-04-04
  • 詳解 vue.js用法和特性

    詳解 vue.js用法和特性

    Vue.js目前已經(jīng)更新到2.x，功能和語(yǔ)法上有一定升級(jí)和修改，本文首先介紹基礎(chǔ)內(nèi)容。感興趣的朋友一起看看吧
    2017-10-10
  • Element中table組件按照屬性執(zhí)行合并操作詳解

    Element中table組件按照屬性執(zhí)行合并操作詳解

    在我們?nèi)粘ｉ_(kāi)發(fā)中，表格業(yè)務(wù)基本是必不可少的，對(duì)于老手來(lái)說(shuō)確實(shí)簡(jiǎn)單，家常便飯罷了，但是對(duì)于新手小白如何最快上手搞定需求呢？本文從思路開(kāi)始著手，幫你快速搞定表格
    2022-11-11
  • vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化

    vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化

    這篇文章主要介紹了vue watch如何深度監(jiān)聽(tīng)數(shù)組每一項(xiàng)的變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue使用axios導(dǎo)出后臺(tái)返回的文件流為excel表格詳解

    vue使用axios導(dǎo)出后臺(tái)返回的文件流為excel表格詳解

    這篇文章主要介紹了vue使用axios導(dǎo)出后臺(tái)返回的文件流為excel表格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • Vue組件化開(kāi)發(fā)的必備技能之組件遞歸

    Vue組件化開(kāi)發(fā)的必備技能之組件遞歸

    組件是可以在它們自己的模板中調(diào)用自身的,不過(guò)它們只能通過(guò)?name?選項(xiàng)來(lái)做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開(kāi)發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • Vue extend使用示例深入分析

    Vue extend使用示例深入分析

    這篇文章主要介紹了Vue.extend使用示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Vue 表單控件綁定的實(shí)現(xiàn)示例

    Vue 表單控件綁定的實(shí)現(xiàn)示例

    本篇文章主要介紹了Vue 表單控件綁定的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • Vue項(xiàng)目前端部署詳細(xì)步驟(nginx方式)

    Vue項(xiàng)目前端部署詳細(xì)步驟(nginx方式)

    Nginx(engine x)是一個(gè)高性能的HTTP和反向代理web服務(wù)器,是部署前端項(xiàng)目的首選,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目前端部署(nginx方式)的相關(guān)資料,需要的朋友可以參考下
    2023-09-09
  • vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx":"TypeError的解決方法

    vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx&qu

    這篇文章主要給大家介紹了關(guān)于vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?“xxx“:“TypeError:Cannot?read?properties?of?undefined的解決方法,需要的朋友可以參考下
    2023-03-03

最新評(píng)論