接口自动化平台前端(3)-登陆优化

原创

流年Felix

发布于 2023-05-28 23:20:00

2390

发布于 2023-05-28 23:20:00

在后端登陆接口已经写好的情况下，前端就可以做登陆这块的处理，如果登陆成功就将后端返回的token拿到并且塞到请求头中，如果接口返回token失效的信息，则提示用户token失效，并跳转登陆页面。我们可以通过修改axios 请求拦截器来实现这些场景

1、request拦截器设置如下

// request interceptor
service.interceptors.request.use(
  config => {
    //从vuex获取token，塞到header中
    if (store.getters.token) {
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

2、response拦截器优化：

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      // 判断 token 失效的场景
      // 如果 token 失效，则弹出确认对话框，用户点击后，清空 token 并返回登录页面
      if (res.code === 401) {
        MessageBox.alert('Token已失效，请重新登陆', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || '请求失败'))
    } else {
      return res
    }
  }