Axios 登陆授权中HTTP拦截器实例

最近在项目中使用了Vue,本文探讨的是在登陆授权中,Axios 对服务器端返回响应的操作,并分享一个简单的 Axios 拦截器实例。我先直接 PO 这段代码,在注释里详细探讨。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 引入axios
import axios from 'axios'

// 这部分是引入Vuex,是全局数据Store
import store from './store/store'
import * as types from './store/types'

// Vue 路由控制
import router from './router'

// axios http request 拦截器
axios.interceptors.request.use(
config => {
// 验证全局数据中是否存在服务端派发的 Token
if (store.state.token) {
// 若服务端存在 Token,则将 token 设定作为默认头信息发送字段
config.headers.Authorization = `token ${store.state.token}`;
}
return config;
},
err => {
return Promise.reject(err);
});

// http response 拦截器
axios.interceptors.response.use(
response => {
// 正常情况直接跳过
return response;
},
error => {
// 服务器端返回错误的情况
if (error.response) {
switch (error.response.status) {
case 401:
// 服务器端返回statu 401 清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
// console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
return Promise.reject(error.response.data)
});

export default axios;

以上是 Axios Http 拦截器使用实例。

当我们通过后台接口得到 token 需要通过安全的方式保存,尤其是跨域的情况。当前建议的方式是通过 Vuex 或者 Cookie 保存,具体实现方式还是要看项目 API 的结构了。

分享到 评论