在前后端完全分離的情況下揣钦，Vue項目中實現(xiàn)token驗證大致思路如下：
1漠酿、用戶輸入賬號密碼，前端調(diào)后端的登陸接口宇姚，發(fā)送用戶名和密碼夫凸，
2、后端收到請求魔熏，驗證用戶名和密碼啼止，驗證通過后（即登錄成功），后端返回token給前端滓窍；
3巩那、前端拿到token，將token存儲到localStorage和vuex中噪生，并跳轉(zhuǎn)路由頁面东囚；
4、前端每次跳轉(zhuǎn)路由桨嫁，都要判斷 localStroage 中有無 token ，沒有就跳轉(zhuǎn)到登錄頁面楣导，有則跳轉(zhuǎn)到對應(yīng)路由頁面（ 通過router.beforeEach((to, from, next)=>{.....}）)
5筒繁、每次調(diào)后端接口巴元，都要在請求頭中加上token；
6血当、后端判斷請求頭中有無token禀忆，有token，就拿到token并驗證token离熏，驗證成功就返回數(shù)據(jù)戴涝，驗證失敗（例如：token過期）就返回編碼401（編碼由前臺和后臺約定好）奸鸯，請求頭中沒有token也返回編碼401可帽；
7、如果前端拿到狀態(tài)碼為401蓄拣，則清除token信息并跳轉(zhuǎn)到登錄頁面努隙，并彈框提示用戶當(dāng)前缺少token或者token已失效，請重新登錄咽斧；
一、調(diào)登錄接口成功张惹，在回調(diào)函數(shù)中將token存儲到localStorage和vuex中
login.vue
<template>
<div>
<input type="text" v-model="ruleForm.userName" placeholder="用戶名"/>
<input type="text" v-model="ruleForm.password" placeholder="密碼"/>
<button @click="login">登錄</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
name: '',
data() {
return {
ruleForm: {
userName: '',
password: '',
},
};
},
methods:{
// 登錄
login() {
if (!this.ruleForm.userName) {
this.ShowToast('賬號不能為空');
return;
}
if (!this.ruleForm.password) {
this.ShowToast('密碼不能為空');
return;
}
this.showLoading();
getUserLogin({
username: this.ruleForm.userName,
password：this.ruleForm.password
}).then((res) => {
this.HideLoading();
this.$store.commit('set_Authorization', res.data.token);// token
// 跳轉(zhuǎn)登錄
this.$router.push({
name: 'home'
});
}).catch((err) => {
this.HideLoading();
this.ShowToast('賬號或密碼錯誤,登錄失敗');
console.log(err);
});
},
}
}
</script>
store文件夾下的index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '', // 存儲token
},
mutations: {
// 修改token，并將token存入localStorage
set_Authorization(state, data) {
state.Authorization = data; // 在這里data就是token,從登錄頁傳過來的
localStorage.setItem('Authorization', data);
},
},
actions: {}
});
二拧额、路由導(dǎo)航守衛(wèi)
main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
document.addEventListener('deviceready', () => {
const vm = new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
router.beforeEach((to, from, next) => {
if (to.path === '/') {
next();
} else {
const token = localStorage.getItem('Authorization'); // 獲取token
// token不存在
if (token === null || token === '') {
next('/');
vm.ShowToast('認(rèn)證信息丟失侥锦，請重新登錄');
} else {
next();
}
}
});
}, false);
三德挣、請求頭加token，如果前端拿到狀態(tài)碼為401番挺，就清除token信息并跳轉(zhuǎn)到登錄頁面
import Axios from 'axios';
Axios.defaults.baseURL = 'http://67.10.90.150:8092/'; // 基礎(chǔ)url
Axios.defaults.timeout = 60000; // 請求超時
Axios.defaults.withCredentials = true; // 允許跨域攜帶cookie信息
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 添加請求攔截器
Axios.interceptors.request.use(
(config) => {
if (localStorage.getItem('Authorization')) {
config.headers.Authentication = localStorage.getItem(
'Authorization'
);
}
return config;
},
error => Promise.reject(error)
);
// 添加響應(yīng)攔截器一
Axios.interceptors.response.use(({ data }) => data,
(error) => {
if (error.response.status === 401 && error.response.data) {
this.ShowToast('登錄過期' || error.message);
this.$router.push({ name: '/login' });
localStorage.removeItem('Authorization');
}
return Promise.reject(error);
});
});
// 添加響應(yīng)攔截器二
Axios.interceptors.response.use(({ data }) => data,
(error) => {
if(error && error.response){
switch(error.response.status){
case 400：
error.message = '請求錯誤';
break;
case 401：
error.message = '未授權(quán)玄柏，請登錄';
localStorage.removeItem('Authorization');
this.$router.push({ name: '/login' });
break;
case 403：
error.message = '拒絕訪問';
break;
case 404：
error.message = '`請求地址出錯：${error.response.config.url}`';
break;
case 408：
error.message = '請求超時';
break;
case 500：
error.message = '服務(wù)器內(nèi)部錯誤';
break;
case 501：
error.message = '服務(wù)未實現(xiàn)';
break;
case 502：
error.message = '網(wǎng)關(guān)錯誤';
break;
case 503：
error.message = '服務(wù)不可用';
break;
case 504：
error.message = '網(wǎng)關(guān)超時';
break;
case 505：
error.message = 'HTTP版本不受支持';
break;
case ECONNABORTED：
error.message = '請求超時';
break;
default:
break;
}
}else {
error.message = '數(shù)據(jù)請求超時';
}
this.ShowToast(error.message);
return Promise.reject(error);
});
});
