Vue中設(shè)置登錄驗證攔截功能的思路詳解
Hello,你好呀,我是灰小猿
,一個超會寫bug的程序猿!
今天在做vue和springboot交互的一個項目的時候,想要基于前端實現(xiàn)一些只有登錄驗證之后才能訪問某些頁面的操作,所以在這里總結(jié)一下實現(xiàn)該功能的一個解決方案,
首先說一下我是如何判斷是否已經(jīng)登錄的,
一、解決思路
由于在我的springboot后臺采用的shiro+Jwt安全框架,所以會在登錄之后反饋給前端一個token
,并且前端會將該token進行存儲,所以我是去查找瀏覽器中是否存在token,如果瀏覽器中存在token,則說明登錄成功,可以訪問相關(guān)頁面;
如果沒有token則說明沒有登錄,j就跳轉(zhuǎn)到登錄頁面。為了簡化操作,我將這個驗證的過程進行了封裝。
注意:
使用這種方法進行驗證的前提是你的前后端是通過shiro和token進行驗證的,并且前端會存儲服務(wù)器返回的token。
二、讓瀏覽器存儲服務(wù)器返回的token
首先來看一下服務(wù)器端返回的token是如何被我在前端頁面中存儲的。
首先我在store文件下的index.js文件中封裝了一個SET_TOKEN方法,用來將token存儲到瀏覽器,這樣我們每次就都可以通過localStorage.getItem(“token”),來從本地拿到我們的token,同時封裝了一個REMOVE_INFO方法,在當我們退出登錄的時候,清空瀏覽器中的token信息。
store文件下的index.js中代碼如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { // token: "", //用戶的信息可以直接從瀏覽器中取出來 token: localStorage.getItem("token"), //反序列化操作 userInfo: JSON.parse(sessionStorage.getItem("userInfo")) }, mutations: { /**類似set操作*/ //給token賦值 SET_TOKEN: (state, token) => { state.token = token; //將信息存儲到瀏覽器中,以至于瀏覽器關(guān)閉時信息還在 localStorage.setItem("token", token); }, //給userinfo賦值 SET_USERINFO: (state, userInfo) => { state.userInfo = userInfo; //session會在每次瀏覽器關(guān)閉時清空,在重新登錄后再生成 //由于sessionStorage不能存儲對象,所以要將其存儲成字符串的形式 sessionStorage.setItem("userInfo", JSON.stringify(userInfo)); }, //移除用戶信息 REMOVE_INFO: (state) => { //移除用戶信息時將用戶所有的信息都置為空 state.token = ""; state.userInfo = {}; localStorage.setItem("token", ""); sessionStorage.setItem("userInfo", JSON.stringify("")); } }, getters: { /**類似get請求*/ //獲取用戶信息 getUser: state => { return state.userInfo; } }, actions: {}, modules: {} })
三、在請求中設(shè)置訪問權(quán)限
由于我們并不是所有的頁面都只要在登錄的時候才能訪問,所以我們要對需要進行登錄才能訪問的頁面設(shè)置訪問權(quán)限,
在vue中我們一般將訪問路由設(shè)置在router下的index.js文件中,對于需要添登錄權(quán)限的請求路由,我們可以給其增加meta屬性,在其中設(shè)置一個Boolean類型的屬性requireAuth, 我們會以該屬性是否為true來判斷是否需要驗證登錄。
比如我們的BlogEdit頁面只有在登錄的時候才能訪問,Login頁面不需要登權(quán)限,那么我們就可以這樣設(shè)置:(代碼有刪減,但是保留了核心部分,只是刪除了部分路由。)
/** * 路由注冊中心 */ import Vue from 'vue' import VueRouter from 'vue-router' //注冊頁面 import Login from '../views/Login.vue' import BlogEdit from '../views/BlogEdit.vue' Vue.use(VueRouter) const routes = [ { path: '/login', name: 'Login', component: Login }, { path: '/blog/add', name: 'BlogAdd', component: BlogEdit, //添加權(quán)限訪問,表示只有登錄之后才能進行該操作 meta: { requireAuth: true } }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
這樣在每次請求BlogEdit頁面的時候都會進行判斷。
四、封裝登錄驗證
現(xiàn)在我們需要寫一個方法來對我們剛才設(shè)置的屬性進行驗證。所以在src目錄下新建一個permission.js文件,在其中進行封裝。
思路是這樣的:
首先我們攔截該請求,獲取到該請求中的requireAuth參數(shù),如果參數(shù)是true,那么就去獲取瀏覽器中的token,驗證當前是否是登錄狀態(tài)。如果存在token,就放行請求;如果沒有獲取到token,就跳轉(zhuǎn)到登錄頁面。
注意:
如果你是基于其他驗證登錄的,可以將
//獲取到本地的token
const token =ocalStorage.getItem(“token”)
換成你的驗證方式,但是思路都是一樣的。
代碼如下:
/** * 請求登錄驗證,如果沒有登錄,不能訪問頁面,返回到登錄頁面 */ import router from "./router"; //路由判斷登錄,根據(jù)路由配置文件的參數(shù) router.beforeEach((to,from,next)=>{ //判斷該路由是否需要登錄權(quán)限 //record.meta.requireAuth是獲取到該請求中攜帶的該參數(shù) if (to.matched.some(record => record.meta.requireAuth)){ //獲取到本地的token const token = localStorage.getItem("token") console.log("顯示token----------:" + token) //判斷當前的token是否存在,也就是登錄時的token if (token){ //如果指向的是登錄頁面,不做任何操作 if (to.path === "/login"){ }else { //如果不是登錄頁面,且token存在,就放行 next() } }else { // 如果token不存在 // 前往登錄 next({path:'/login'}) } }else { //如果不需要登錄認證,就直接訪問 next() } })
最后別忘了將該頁面引入到mian.js中。
//導入permission.js,用戶進行前端的權(quán)限控制 import "./permission"
總結(jié)一下
主要的操作就是第三步和第四步,只要你在請求路由中設(shè)置了登錄驗證的參數(shù),同時第四步寫入了登錄攔截驗證,并且引入到的main.js文件中,就可以了!
至此通過前端驗證登錄攔截完成。
到此這篇關(guān)于Vue中設(shè)置登錄驗證攔截功能的思路詳解的文章就介紹到這了,更多相關(guān)vue登錄驗證攔截內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能
這篇文章主要介紹了vue實現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下2019-04-04解決vue axios的封裝 請求狀態(tài)的錯誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯誤提示問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue 將后臺傳過來的帶html字段的字符串轉(zhuǎn)換為 HTML
這篇文章主要介紹了Vue 將后臺傳過來的帶html字段的字符串轉(zhuǎn)換為 HTML ,需要的朋友可以參考下2018-03-03Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-03-03