Axios权限拦截

November 12, 2017

在使用流行的前端框架时，前后台的数据交互常使用 token 或其他一些自定义 headers 来标识用户身份，因此在发送请求的过程中，我们就需要用到一些拦截器来帮助我们完成一些工作，例如添加自定义的 headers、取消请求等。

添加自定义 headers

这个操作我们在拦截器中进行就可以了

// 先预定义好一个axios实例r
const r = axios.create({
  // your config
})
// 给r配置拦截器
r.interceptors.request.use(
  config => {
    // 自定义一些配置
    config.headers['x-user-flag'] = 'your-flag'
    // 从store中获取数据
    const authState = store.getState().auth
    if (!!authState.loginState) {
      config.headers['openid'] = authState.openid
    }
    return config
  },
  error => Promise.reject(error)
)

判断没有权限时拦截请求

这个操作同样要在拦截器中定义，但是我们要先创建一个 CancelToken

const CancelToken = axios.CancelToken
const source = CancelToken.source()
r.interceptors.request.use(
  config => {
    const authState = store.getState().auth
    if (!!authState.loginState) {
      config.headers['openid'] = authState.openid
    } else {
      source.cancel('No Permission')
      // some other actions
    }
    return config
  },
  error => Promise.reject(error)
)

拦截响应

拦截响应和上述方法类似，新建一个 response 的拦截器即可

r.interceptors.use(
  res => {
    // some actions
    return res
  },
  error => Promise.reject(error)
)

参考文档

https://github.com/axios/axios#interceptors https://github.com/axios/axios#cancellation