Vue前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)
用戶在首次訪問網(wǎng)站時,應(yīng)在登錄頁面填寫賬號密碼,前端攜帶用戶信息向服務(wù)器請求。
1、服務(wù)器驗(yàn)證用戶信息
驗(yàn)證失?。航o前端響應(yīng)數(shù)據(jù)
驗(yàn)證通過:對該用戶創(chuàng)建token,并以響應(yīng)數(shù)據(jù)返回給前端
2、前端接受后端響應(yīng)的數(shù)據(jù)
錯誤信息:提示錯誤消息
正確信息:頁面進(jìn)行跳轉(zhuǎn)至首頁,同時保存token(可以保存在cookie或localstorage)
3、用戶點(diǎn)擊某功能模塊的觸發(fā)請求(比如某功能有權(quán)限設(shè)置或是是否需要token)
利用路由守衛(wèi)beforeEach()
將保存的token添加至請求攔截器的請求頭中,并根據(jù)響應(yīng)攔截器返回的狀態(tài)碼判斷該功能模塊是否有權(quán)限做出相應(yīng)的跳轉(zhuǎn)或攔截。
request.js
// 對于axios進(jìn)行二次封裝 import axios from 'axios'; const requests = axios.create({ // 配置對象 // 基礎(chǔ)路徑,發(fā)請求的時候,路徑當(dāng)中會有api baseURL: "/api", // 代表請求超時的時間 5s timeout: 5000, }); // 請求攔截器:在發(fā)請求之前,請求攔截器可以監(jiān)測到,可以在請求發(fā)出去之前做一些事情 requests.interceptors.request.use( (config)=>{ const token = localStorage.getItem('token'); // console.log('token',token); if(token) { let token = JSON.parse(localStorage.getItem('token')).token; config.headers['Authorization'] = token; } return config; }); // 響應(yīng)攔截器 requests.interceptors.response.use( (res)=>{ const { status, data,message } = res if(data.success){ return data }else{ // 假設(shè)后端返回狀態(tài)碼20005代表沒有訪問權(quán)限 if (data.code === 20006) { alert('您沒有該功能的權(quán)限!') } // 將錯誤信息通過Promise返回, return Promise.reject(message) } },(error)=>{ // 服務(wù)器響應(yīng)失敗的回調(diào)函數(shù) return Promise.reject(error); } ); // 對外暴露 export default requests;
Login.vue
submitLogin(formName){ this.$refs[formName].validate(async (valid) => { if (valid) { // 先發(fā)送請求,驗(yàn)證用戶 const {username,password} = this.loginForm; let result = await this.$API.login.reqLogin(username,password); if(result.code == 200){ // 成功后存儲token并路由跳轉(zhuǎn) let token = { time: new Date().getTime(), token: result.data }; localStorage.setItem("token",JSON.stringify(token)); this.$router.replace('/home'); this.$message({type:'success',message:'登錄成功'}); }else{ alert('登錄失敗') } } else { this.$message.error('請重新輸入賬戶和密碼'); return false; } }); }
在上面的代碼中,將token和響應(yīng)的時間戳一起保存成json對象,這樣可以做到 每隔一定時間后需要重新登錄的功能
router.js
// 判斷登錄是否過時,一天 let time=24 * 60 * 60 * 1000 // 全局前置守衛(wèi)(路由跳轉(zhuǎn)之前進(jìn)行判斷) router.beforeEach((to, from, next) => { // 用戶登錄了才會有token,所以可以用來判斷是否登錄 let token = JSON.parse(localStorage.getItem('token')); if (token) { let deltime = new Date().getTime() if(deltime - token.time > time){ alert('登錄已經(jīng)過期,請重新登錄') localStorage.removeItem('token') next('/login') }else{ next() } } else { // 若沒有token,訪問登錄頁面放行,其他的路由請求均拒絕,跳轉(zhuǎn)到登錄頁 if (to.path == '/login') { next() } else { if(from.path == '/'){ next('/login') }else{ alert('請先登錄,再訪問其他頁面') next('/login') } } } })
到此這篇關(guān)于Vue前端登錄token信息驗(yàn)證功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue token驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue中無法動態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動
這篇文章主要介紹了vue使用better-scroll實(shí)現(xiàn)滑動以及左右聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06vue2項目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
這篇文章主要介紹了vue2項目實(shí)現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下2023-12-12詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版
本篇文章主要介紹了詳解用webpack2.0構(gòu)建vue2.0超詳細(xì)精簡版,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04vue-nuxt?登錄鑒權(quán)的實(shí)現(xiàn)
本文主要介紹了vue-nuxt?登錄鑒權(quán)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-12-12Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC(模板方式)和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝,實(shí)現(xiàn)配置化的菜單,有了配置化的菜單,后續(xù)便可以根據(jù)路由動態(tài)渲染菜單,對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09