Vue路由守衛

我們在看一些網頁的時候如果想進一步了解一些東西的詳情信息的話,當前的網頁就會讓我們進行登錄,我們必須及逆行登錄后才能夠看到我們想看到的詳情信息,這個操作我們稱之為路由守衛也是我們在做一些項目的時候必要進行的一步,如果我們不做這一步的話,自己所作項目中的所有的數據,不管是可以公共訪問的還是不能進行公共訪問的都會展現給用戶,這樣是存在一定性的危險的,會極可能的導致自己公司的一些重要數據的丟失或者被盜用,這個還是值得我們學習的.

咱們先看一下文件的結構

我們開始寫代碼之前要先下載一下關於路路由配置的包npm install vue-router --save 安裝好了之后我們就可以開始寫代碼了我們需要在main.js進行配置一下:

import router from './router'  //引入連接router文件 在main.js進行引入

我們在main.js引入好了之后就可以在router文件中進行對路由的配置了,我們vue的路由守衛有兩種:一種是全局的路由守衛、一種是局部的路由守衛,我們先說一下全局的路由守衛吧,看一下代碼,以下的代碼是在router文件夾中的index文件進行寫入的:

router.beforeEach((to,from,next)=> { let isLogin = localStorage.username if(to.meta.guard){ //判斷是否為true if(isLogin){ 判斷是否為true next() }else{ next('/')//不為true跳轉到登錄頁面 } }else{ next()//不為true往下執行 } }) export default router;//拋出

這個就是一個全局的路由守衛,里面有三個參數,一個是關於我們進行判斷的to中含有我門需要進行判斷的對象我們需要判斷相關的對象的屬性是否為true如果為true就往下依次執行,如果不為true的話就讓其進行頁面中的下一步操作,我們判斷完為true后就要判斷localStorage是否有值(這里用什么都可以,只要可以存儲值進行判斷),如果有值的話就往下執行頁面的操作,如果不為true的話就返回到登錄頁面讓用戶進行登錄操作,等到用戶登錄完成后我們可以存入一條數據用作進行判斷,form是離開路由的頁面,next是繼續執行,這三個參數是必不可少的我們看一下判斷使用的對象該怎么使用:

{ path:'/tablelist', component:tablelist, meta:{guard:true} //如果為true的話就進行路由守衛如果不為true的話就不進行路由守衛
}

文中的注釋也寫道了如果為true的話就進行路由守衛如果不為true的話就不進行路由守衛,對當前的路由進行監控,如果當前的路由想要前往其他的頁面就必須進行路由守衛的流程.好了全局的路由守衛就說到這,我們下面說一下局部的路由守衛

局部的路由守衛與全局的路由守衛是非常類似的,也可以說是長得很像的雙胞胎但是只是性格不一樣,我們的兩個路由守衛也是如此,我們局部的路由守衛的寫法:

{ path: '/table', component: TableList, meta:{ requireAuth:true  //如果為true 對此路由進行鑒權處理 就是進行路由守衛
 }, //局部的路由守衛寫法
    beforeEnter:(to,from,next)=>{ console.log(to,from) let isLogin = localStorage.getItem('name') console.log(isLogin) if(isLogin){ next() }else{ next('/') } } }

看說的沒錯吧,兩種路由守衛是非常的類似的,我們的局部路由守衛的用法是誰要進行路由守衛就在誰那里面寫入路由守衛就可以了.

是不是非常的簡單易懂,如果看懂的小伙伴們就趕緊練習一下,勤學苦練,方能成為人上人,加油!!!!

如果沒有看懂的小伙伴請在下方進行評論,我會盡快回復的.

覺得咱寫的還可以的,請用發財的小手點點贊和關注,小編在此隆重感謝!!!