本文引用CSDN博主面條請(qǐng)不要欺負(fù)漢堡;
鏈接https://blog.csdn.net/gao_xu_520/article/details/104539014
登陸攔截
用戶登錄成功后服務(wù)端返回token的值，然后前端使用axios中請(qǐng)求攔截器（service.interceptors.request.use）再每個(gè)的請(qǐng)求接口上加上Authorization:token的值葬毫，服務(wù)端通過(guò)這個(gè)Authorization來(lái)獲取token的值，來(lái)進(jìn)行判斷token的值是否過(guò)期，如果過(guò)期則接口返回403,前端得到403的狀態(tài)，則提示用戶返回登錄頁(yè)馒铃。request.js
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
import router from '../router';
/**
* 提示函數(shù)
* 禁止點(diǎn)擊蒙層闸婴、顯示一秒后關(guān)閉
*/
const tip = msg => {
Message({
message: msg,
duration: 1000
})
}
/**
* 跳轉(zhuǎn)登錄頁(yè)
* 攜帶當(dāng)前頁(yè)面路由，以期在登錄頁(yè)面完成登錄后返回當(dāng)前頁(yè)面
*/
const toLogin = () => {
router.replace({
path: '/login'
});
}
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// 設(shè)置post請(qǐng)求頭
service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 請(qǐng)求攔截器
service.interceptors.request.use(
config => {
// 登錄流程控制中冲茸，根據(jù)本地是否存在token判斷用戶的登錄情況
// 但是即使token存在，也有可能token是過(guò)期的缅帘，所以在每次的請(qǐng)求頭中攜帶token
// 后臺(tái)根據(jù)攜帶的token判斷用戶的登錄情況噪裕，并返回給我們對(duì)應(yīng)的狀態(tài)碼
// 而后我們可以在響應(yīng)攔截器中，根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作股毫。
const token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config
},
error => {
// 處理請(qǐng)求錯(cuò)誤
return Promise.reject(error)
}
)
// 響應(yīng)攔截器
service.interceptors.response.use(
//請(qǐng)求成功
response => {
const res = response.data;
if (res.code !== 200 && res.status !== 200) {
return Promise.reject(res)
} else {
return res
}
},
//請(qǐng)求失敗
error => {
const {
response
} = error;
if (response) {
// 請(qǐng)求已發(fā)出膳音，但是不在30分鐘的范圍
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
// 處理斷網(wǎng)的情況
// eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)
// network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
// 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)铃诬，會(huì)在斷網(wǎng)組件中說(shuō)明
// store.commit('changeNetwork', false);
}
}
)
/**
* 請(qǐng)求失敗后的錯(cuò)誤統(tǒng)一處理
* @param {Number} status 請(qǐng)求失敗的狀態(tài)碼
*/
const errorHandle = (status, other) => {
// 狀態(tài)碼判斷
switch (status) {
// 401: 未登錄狀態(tài)祭陷，跳轉(zhuǎn)登錄頁(yè)
case 401:
toLogin();
break;
// 403 token過(guò)期
// 清除token并跳轉(zhuǎn)登錄頁(yè)
case 403:
localStorage.removeItem('token');
MessageBox({
message: '登錄過(guò)期，請(qǐng)重新登錄',
callback: action => {
toLogin();
}
})
break;
// 404請(qǐng)求不存在
case 404:
tip('請(qǐng)求的資源不存在');
break;
}
}
export default service
image.png
- 登陸接口
interface.js
import request from '@/utils/request'
const base = {
local: 'localhost',
dev: 'http://10.16.3330.39:8093/',
}
//登錄接口
export function dischargeLogin(params) {
return request.post(`${base.dev}discharge/login`, params)
}
login.vue
import * as Api from "@/api/interface";
Api.login(this.loginForm).then(res=>{
this.$router.push({
path: "/home"
});
localStorage.setItem("token", res.data.token);
}).catch((e) => {
Message({
message: e.msg,
type: 'error',
duration: 1000
})
});
本文引用CSDN博主面條請(qǐng)不要欺負(fù)漢堡;
鏈接https://blog.csdn.net/gao_xu_520/article/details/104539014
