vue 權限認證token的實現(xiàn)方法
更新時間：2018年07月17日 14:17:54 作者：明媚jm靜好
這篇文章主要介紹了vue 權限認證token的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近搞一個vue的項目，接口帶了權限驗證，于是乎稍微研究了一下，中間遇到的各種坑都來源于自己概念的不熟悉。
主要呢是分兩步：
一是vue路由層的控制，由于項目的路由有規(guī)律可循，所以沒有采用網(wǎng)上requireAuth那種在需要加驗證的路由上配置meta(具體見：http://www.fzitv.net/article/143928.htm)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({...})
router.beforeEach((to, from, next) => {
if(/^\/[S|B|V]/.test(to.path)){
if (isLogin()) {//判斷token信息的自寫方法
next();
}
else {
next({ name: 'login' })//跳轉到登錄頁
}
}
else {
next();
}
})
二是http 攔截器 ，統(tǒng)一處理所有http請求和響應，就得用上 axios 的攔截器。
import axios from 'axios'
// http request 攔截器
axios.interceptors.request.use(function (config) {
config.headers.token = sessionStorage.getItem("user_token")//將接口返回的token信息配置到接口請求中
return config;
}, function (error) {
return Promise.reject(error);
});
// http response 攔截器
axios.interceptors.response.use(function(response){
if(response.data.code=='1001'||response.data.code=='1002'){//具體的判斷token失效的參數(shù)
sessionStorage.setItem("user_token",'')
sessionStorage.setItem("LoginUser",'{}')
alert(response.data.msg);
window.location.href='/#/login'//需求方要求一旦出錯立即跳轉登錄，所以采取這種侵入式的手段。
}else{
return response
}
}, function (error) {
return Promise.reject(error);
});
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
之前只是淺顯的使用插件進行vue開發(fā)展示,最近深入的研究了下,下面這篇文章主要給大家介紹了關于Vue3兄弟組件傳值之mitt的超詳細講解,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
有的功能需要設置必填項,當然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關于vue?el-input設置必填提示功能(單個與多個)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
當我們在Vue.js項目中引用圖片時，關于圖片路徑有以下幾種情形,下面通過本文給大家分享Vue.js中的圖片引用路徑的方式，感興趣的朋友一起看看吧2017-07-07
路由守衛(wèi)（Route?Guards）是?Vue?Router?的一個功能,它允許我們在路由發(fā)生之前執(zhí)行邏輯判斷,這篇文章主要為大家介紹了Vue中路由守衛(wèi)的具體應用,需要的可以了解下2024-03-03
這篇文章主要介紹了vue3-pinia-ts項目中的使用,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue監(jiān)聽器簡單使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vant之關于van-list的使用以及一些坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在vue.js中使用JSZip實現(xiàn)在前端解壓文件的方法
今天小編就為大家分享一篇在vue.js中使用JSZip實現(xiàn)在前端解壓文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09