vue后台項目的一套基本的登錄流程:
前端調后端的登錄接口,每次登錄成功后,后端會返回一個token字段,前端將這個token保存,之后發送請求的時候,請求頭帶上這個token,后端收到請求后,會匹配token,匹配成功,則發送接口,匹配失敗,則不會允許請求接口,vue項目中,可以在axios中封裝一個請求攔截器
封裝請求攔截:
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import {getToken} from '@/utils/auth'//利用cookies存取token
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 接口 url = base url + request url
})
// request interceptor
service.interceptors.request.use(
config => {
if (store.getters.token) {//將后端獲取的token加到接口的請求頭里去后端匹配
config.headers['token'] = getToken()
}
return config
},
error => {
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(response => {
const result = response.data
if (response.headers && response.headers['content-type'] === 'application/octet-stream') {
// 下載文件 - 直接返回成功-不走下面攔截
return response
}
if (result.code !== 200) {
if (result.code === 403) { // 登錄失效
....
return Promise.reject(result)
} else {
...
// 請求失敗-業務的失敗
return Promise.reject(result)
}
} else { // 請求成功
return result.data
}
}, error => {
const result = { code: 9999, message: '網絡錯誤' }
return Promise.reject(result)
})
export default service