Vue中登錄驗證成功后保存token,并每次請求攜帶并驗證token操作
在vue中,可以用**Storage(sessionStorage,localStorage)**來存儲token,也可以用vuex來存儲(但要考慮頁面刷新數(shù)據(jù)消失問題,可以在vuex用Storage),
下面介紹用localStorage來存儲:
在登錄請求成功后,會返回一個token值,用loaclStorage保存
localStorage.setItem('token',res.data.token)
在main.js中設(shè)置全局請求頭和響應(yīng)回來的判斷
//設(shè)置axios請求頭加入token Axios.interceptors.request.use(config => { if (config.push === '/') { } else { if (localStorage.getItem('token')) { //在請求頭加入token,名字要和后端接收請求頭的token名字一樣 config.headers.token=localStorage.getItem('token'); } } return config; }, error => { return Promise.reject(error); }); //============================= //響應(yīng)回來token是否過期 Axios.interceptors.response.use(response => { console.log('響應(yīng)回來:'+response.data.code) //和后端token失效返回碼約定403 if (response.data.code == 403) { // 引用elementui message提示框 ElementUI.Message({ message: '身份已失效', type: 'err' }); //清除token localStorage.removeItem('token '); //跳轉(zhuǎn) router.push({name: 'login'}); } else { return response } }, error => { return Promise.reject(error); })
在router中的index設(shè)置全局守衛(wèi)來判斷是否存在token,不存在就返回登錄頁
router.beforeEach((to, from, next) => { //to到哪兒 from從哪兒離開 next跳轉(zhuǎn) 為空就是放行 if (to.path === '/') { //如果跳轉(zhuǎn)為登錄,就放行 next(); } else { //取出localStorage判斷 let token = localStorage.getItem('token '); if (token == null || token === '') { console.log('請先登錄') next({name: 'login'}); } else { next(); } }});
補充知識:Vue獲取并存儲服務(wù)器返回的AuthorizationToken信息并給每次請求添加上token
由于后臺是用jwt的token進(jìn)行身份權(quán)限驗證,后臺在登錄后把token添加響應(yīng)頭里,所以前臺需要把這個token存放起來,并給每次請求的請求頭添加上token,服務(wù)器才能獲取token進(jìn)行身份認(rèn)證。
前臺使用vue項目:
loging.vue(登錄組件)
{ submitForm(formName) { this.$axios .post('/api/admin/login', { userName: this.ruleForm.userName, password: this.ruleForm.password }) .then(successResponse => { this.responseResult = JSON.stringify(successResponse.data) this.msg = JSON.stringify(successResponse.data.msg) if (successResponse.data.code === 200) { this.msg=''; localStorage.setItem('userName',this.ruleForm.userName); //獲取并存儲服務(wù)器返回的AuthorizationToken信息 var authorization=successResponse.headers['authorization']; localStorage.setItem('authorization',authorization); //登錄成功跳轉(zhuǎn)頁面 this.$router.push('/dashboard'); } }) .catch(failResponse => {}) } }
main.js(全局配置js):
//自動給同一個vue項目的所有請求添加請求頭 axios.interceptors.request.use(function (config) { let token = localStorage.getItem('authorization'); if (token) { config.headers['Authorization'] = token; } return config; })
這里還需要考慮token過期失效的問題,博主將會在后續(xù)另寫博客補充。
以上這篇Vue中登錄驗證成功后保存token,并每次請求攜帶并驗證token操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element?ui富文本編輯器的使用效果與步驟(quill-editor)
富文本編輯器在任何項目中都會用到,在Element中我們推薦vue-quill-editor組件,下面這篇文章主要給大家介紹了關(guān)于element?ui富文本編輯器的使用效果與步驟(quill-editor)的相關(guān)資料,需要的朋友可以參考下2022-10-10vue?scss后綴文件background-image路徑錯誤的解決
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式
這篇文章主要介紹了vant中的Cascader級聯(lián)選擇異步加載地區(qū)數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07京東 Vue3 組件庫支持小程序開發(fā)的詳細(xì)流程
這篇文章主要介紹了京東 Vue3 組件庫支持小程序開發(fā)的詳細(xì)流程,通過引入NutUI,即可在項目中使用,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-06-06Vue開發(fā)配置tsconfig.json文件的實現(xiàn)
tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項,本文就來介紹一下Vue開發(fā)配置tsconfig.json文件的實現(xiàn),感興趣的可以了解一下2023-08-08