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