1.請求頭中設(shè)置token
每次請求請求頭都攜帶token，沒有token或者token失效后端會返回錯(cuò)誤
axios.interceptors.request.use(configs => {
let token = sessionStorage.getItem("token");
if (token) {
configs.headers.authorization = token;
}
}2.拒絕非權(quán)限請求
防止一些在瀏覽器上強(qiáng)制將按鈕改成可用（如將disabled改為true就可用），然后發(fā)起請求后發(fā)送后端文章來源：http://www.zghlxwxcb.cn/news/detail-674521.html
const actionMapping = {
'get': 'view',
'post': 'add',
'put': 'edit',
'delete': 'delete',
}
const whiteList = ['/login','/user/login','/user/me', '/', '/404']
// 對請求頭進(jìn)行處理（token）
axios.interceptors.request.use(configs => {
let token = sessionStorage.getItem("token");
if (token) {
configs.headers.authorization = token;
}
// 拒絕非權(quán)限請求
if (!whiteList.includes(configs.url)) {
let metaRights = router.currentRoute.value.meta.rights;
let action = actionMapping[configs.method];
if (!metaRights.includes(action)) {
ElMessage.error("沒有操作權(quán)限");
return Promise.reject(new Error('沒有操作權(quán)限'))
}
}
return configs;
});3.響應(yīng)攔截
響應(yīng)控制:請求返回401，token無效或者后期，則需要跳轉(zhuǎn)到登錄界面文章來源地址http://www.zghlxwxcb.cn/news/detail-674521.html
// 處理返回?cái)?shù)據(jù)
axios.interceptors.response.use(response => {
return response;
}, error => {
let { status, data } = error.response;
let { message, errorDetail } = error.response.data;
....
if (status === 401 || status === 402 || status === 403) {
// 沒有權(quán)限，需要重新登錄
ElMessage.error("token失效或無權(quán)限，正跳轉(zhuǎn)登錄頁面......");
sessionStorage.clear();
return router.push("/login");
}
....
}到了這里，關(guān)于vue權(quán)限管理——請求和響應(yīng)權(quán)限控制的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
