一篷扩、路由攔截
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加該字段，表示進(jìn)入這個(gè)路由是需要登錄的
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限
if (store.state.token) { // 通過vuex state獲取當(dāng)前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)茉盏，登錄成功后跳轉(zhuǎn)到該路由
})
}
}
else {
next();
}
})
每個(gè)鉤子方法接收三個(gè)參數(shù)：
- to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
- from: Route: 當(dāng)前導(dǎo)航正要離開的路由
- next: Function: 一定要調(diào)用該方法來 resolve 這個(gè)鉤子鉴未。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
- next(): 進(jìn)行管道中的下一個(gè)鉤子鸠姨。如果全部鉤子執(zhí)行完了铜秆，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。
- next(false): 中斷當(dāng)前的導(dǎo)航讶迁。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕）连茧，那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
- next(‘/’) 或者 next({ path: ‘/’ }): 跳轉(zhuǎn)到一個(gè)不同的地址巍糯。當(dāng)前的導(dǎo)航被中斷啸驯，然后進(jìn)行一個(gè)新的導(dǎo)航。
攔截器
axios攔截請(qǐng)求：首次登錄的請(qǐng)求不帶token祟峦，之后都帶上token
axios攔截響應(yīng)：請(qǐng)求時(shí)報(bào)錯(cuò)的部分處理封裝函數(shù)
import stores from 'store'
import axios from 'axios'
import { Message } from 'element-ui'
import router from './router'
// 攔截請(qǐng)求
axios.interceptors.request.use(
config => {
// POST || PUT || DELETE請(qǐng)求時(shí)先格式化data數(shù)據(jù)
// 這里需要引入第三方模塊qs
if (
config.method.toLocaleUpperCase() === 'post' ||
config.method.toLocaleUpperCase() === 'put' ||
config.method.toLocaleUpperCase() === 'delete'
) {
config.data = qs.stringify(config.data)
}
if (stores.get('tokenData')) {
config.headers.Authorization = `Token ${stores.get('tokenData').token}`
}
// console.log(config, '響應(yīng)數(shù)據(jù)')
return config
},
err => {
// console.log(err)
return Promise.reject(err)
})
// 攔截響應(yīng)
axios.interceptors.response.use(
response => {
// console.log(response, '響應(yīng)正確')
return response
},
error => {
// 此處報(bào)錯(cuò)可能因素比較多
// 1.需要授權(quán)處用戶還未登錄罚斗，因?yàn)槁酚啥斡序?yàn)證是否登陸，此處理論上不會(huì)出現(xiàn)
// 2.需要授權(quán)處用戶登登錄過期
// 3.請(qǐng)求錯(cuò)誤 4xx
// 5.服務(wù)器錯(cuò)誤 5xx
// 關(guān)于鑒權(quán)失敗宅楞，與后端約定狀態(tài)碼為500
console.log(error.response, '響應(yīng)錯(cuò)誤攔截')
let text = ''
if (error.response) {
text = setResponse(error.response.data)
} else {
Message.error({
message: '響應(yīng)有誤针姿，請(qǐng)聯(lián)系管理員',
duration: 1000
})
}
switch (error.response.status) {
case 403:
// 一些處理...
break
case 404:
// 一些處理...
break
case 500:
let userData = getUserData()
if (userData.token === undefined) {
// 此處為未登錄處理
// 一些處理之后...再去登錄頁面...
// router.push({
// path: '/login'
// })
} else {
let overdueTime = userData.overdueTime
let nowTime = +new Date
if (overdueTime && nowTime > overdueTime) {
// 此處登錄過期的處理
// 一些處理之后...再去登錄頁面...
// router.push({
// path: '/login'
// })
} else {
// 極端情況，登錄未過期厌衙，但是不知道哪兒錯(cuò)了
// 按需處理吧...我暴力回到了首頁
router.push({
path: '/'
})
}
}
break
case 501:
// 一些處理...
break
default:
// 狀態(tài)碼辣么多距淫，按需配置...
break
}
return error;
// return Promise.reject(error.response.data)
})
function setResponse(jsonObj) {
for (let key in jsonObj) {
let element = jsonObj[key]
if (element.length > 0 && typeof (element) === 'object' || typeof (element) === 'object') {
// console.log(element)
setResponse(element)
} else {
arr.push(element)
}
}
return arr
}
// 注銷
export function removeLogin() {
stores.remove('tokenData')//移除store里面的緩存
}
