Vue中設(shè)置登錄驗(yàn)證攔截功能的思路詳解
Hello,你好呀,我是灰小猿,一個(gè)超會(huì)寫bug的程序猿!
今天在做vue和springboot交互的一個(gè)項(xiàng)目的時(shí)候,想要基于前端實(shí)現(xiàn)一些只有登錄驗(yàn)證之后才能訪問某些頁(yè)面的操作,所以在這里總結(jié)一下實(shí)現(xiàn)該功能的一個(gè)解決方案,
首先說一下我是如何判斷是否已經(jīng)登錄的,
一、解決思路
由于在我的springboot后臺(tái)采用的shiro+Jwt安全框架,所以會(huì)在登錄之后反饋給前端一個(gè)token,并且前端會(huì)將該token進(jìn)行存儲(chǔ),所以我是去查找瀏覽器中是否存在token,如果瀏覽器中存在token,則說明登錄成功,可以訪問相關(guān)頁(yè)面;
如果沒有token則說明沒有登錄,j就跳轉(zhuǎn)到登錄頁(yè)面。為了簡(jiǎn)化操作,我將這個(gè)驗(yàn)證的過程進(jìn)行了封裝。
注意:使用這種方法進(jìn)行驗(yàn)證的前提是你的前后端是通過shiro和token進(jìn)行驗(yàn)證的,并且前端會(huì)存儲(chǔ)服務(wù)器返回的token。
二、讓瀏覽器存儲(chǔ)服務(wù)器返回的token
首先來看一下服務(wù)器端返回的token是如何被我在前端頁(yè)面中存儲(chǔ)的。
首先我在store文件下的index.js文件中封裝了一個(gè)SET_TOKEN方法,用來將token存儲(chǔ)到瀏覽器,這樣我們每次就都可以通過localStorage.getItem(“token”),來從本地拿到我們的token,同時(shí)封裝了一個(gè)REMOVE_INFO方法,在當(dāng)我們退出登錄的時(shí)候,清空瀏覽器中的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;
//將信息存儲(chǔ)到瀏覽器中,以至于瀏覽器關(guān)閉時(shí)信息還在
localStorage.setItem("token", token);
},
//給userinfo賦值
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo;
//session會(huì)在每次瀏覽器關(guān)閉時(shí)清空,在重新登錄后再生成
//由于sessionStorage不能存儲(chǔ)對(duì)象,所以要將其存儲(chǔ)成字符串的形式
sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
},
//移除用戶信息
REMOVE_INFO: (state) => {
//移除用戶信息時(shí)將用戶所有的信息都置為空
state.token = "";
state.userInfo = {};
localStorage.setItem("token", "");
sessionStorage.setItem("userInfo", JSON.stringify(""));
}
},
getters: {
/**類似get請(qǐng)求*/
//獲取用戶信息
getUser: state => {
return state.userInfo;
}
},
actions: {},
modules: {}
})
三、在請(qǐng)求中設(shè)置訪問權(quán)限
由于我們并不是所有的頁(yè)面都只要在登錄的時(shí)候才能訪問,所以我們要對(duì)需要進(jìn)行登錄才能訪問的頁(yè)面設(shè)置訪問權(quán)限,
在vue中我們一般將訪問路由設(shè)置在router下的index.js文件中,對(duì)于需要添登錄權(quán)限的請(qǐng)求路由,我們可以給其增加meta屬性,在其中設(shè)置一個(gè)Boolean類型的屬性requireAuth, 我們會(huì)以該屬性是否為true來判斷是否需要驗(yàn)證登錄。
比如我們的BlogEdit頁(yè)面只有在登錄的時(shí)候才能訪問,Login頁(yè)面不需要登權(quán)限,那么我們就可以這樣設(shè)置:(代碼有刪減,但是保留了核心部分,只是刪除了部分路由。)
/**
* 路由注冊(cè)中心
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
//注冊(cè)頁(yè)面
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)限訪問,表示只有登錄之后才能進(jìn)行該操作
meta: {
requireAuth: true
}
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
這樣在每次請(qǐng)求BlogEdit頁(yè)面的時(shí)候都會(huì)進(jìn)行判斷。
四、封裝登錄驗(yàn)證
現(xiàn)在我們需要寫一個(gè)方法來對(duì)我們剛才設(shè)置的屬性進(jìn)行驗(yàn)證。所以在src目錄下新建一個(gè)permission.js文件,在其中進(jìn)行封裝。
思路是這樣的:首先我們攔截該請(qǐng)求,獲取到該請(qǐng)求中的requireAuth參數(shù),如果參數(shù)是true,那么就去獲取瀏覽器中的token,驗(yàn)證當(dāng)前是否是登錄狀態(tài)。如果存在token,就放行請(qǐng)求;如果沒有獲取到token,就跳轉(zhuǎn)到登錄頁(yè)面。
注意:如果你是基于其他驗(yàn)證登錄的,可以將
//獲取到本地的token
const token =ocalStorage.getItem(“token”)
換成你的驗(yàn)證方式,但是思路都是一樣的。
代碼如下:
/**
* 請(qǐng)求登錄驗(yàn)證,如果沒有登錄,不能訪問頁(yè)面,返回到登錄頁(yè)面
*/
import router from "./router";
//路由判斷登錄,根據(jù)路由配置文件的參數(shù)
router.beforeEach((to,from,next)=>{
//判斷該路由是否需要登錄權(quán)限
//record.meta.requireAuth是獲取到該請(qǐng)求中攜帶的該參數(shù)
if (to.matched.some(record => record.meta.requireAuth)){
//獲取到本地的token
const token = localStorage.getItem("token")
console.log("顯示token----------:" + token)
//判斷當(dāng)前的token是否存在,也就是登錄時(shí)的token
if (token){
//如果指向的是登錄頁(yè)面,不做任何操作
if (to.path === "/login"){
}else {
//如果不是登錄頁(yè)面,且token存在,就放行
next()
}
}else {
// 如果token不存在
// 前往登錄
next({path:'/login'})
}
}else {
//如果不需要登錄認(rèn)證,就直接訪問
next()
}
})
最后別忘了將該頁(yè)面引入到mian.js中。
//導(dǎo)入permission.js,用戶進(jìn)行前端的權(quán)限控制 import "./permission"
總結(jié)一下
主要的操作就是第三步和第四步,只要你在請(qǐng)求路由中設(shè)置了登錄驗(yàn)證的參數(shù),同時(shí)第四步寫入了登錄攔截驗(yàn)證,并且引入到的main.js文件中,就可以了!
至此通過前端驗(yàn)證登錄攔截完成。
到此這篇關(guān)于Vue中設(shè)置登錄驗(yàn)證攔截功能的思路詳解的文章就介紹到這了,更多相關(guān)vue登錄驗(yàn)證攔截內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue @vuelidate父子組件綁定注意事項(xiàng)
Vue@vuelidate父子組件驗(yàn)證時(shí),不能直接綁定,需在子組件驗(yàn)證方法內(nèi)部進(jìn)行綁定,以避免父組件驗(yàn)證時(shí)包含子組件的驗(yàn)證2025-02-02
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Nuxt引入vue-persistedstate以及踩坑記錄
這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
關(guān)于Vue在ie10下空白頁(yè)的debug小結(jié)
這篇文章主要給大家介紹了關(guān)于Vue在ie10下空白頁(yè)的debug相關(guān)資料,這是最近在工作中遇到的一個(gè)問題,通過查找相關(guān)的資料終于解決了,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-05-05
Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Vue注冊(cè)模塊與登錄狀態(tài)的持久化實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了Vue+ElementUI使用vue-pdf實(shí)現(xiàn)預(yù)覽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11

