Ant Design Pro用户登录后需要手工刷新页面才能正常使用的问题

Ant Design Pro是个好东西,用了一个多用,各方面都还行。就除了用户登录。主要问题是用户登录之后,并不能马上就可以去访问其它页面,只要是访问带权限页面就会跳转到登录页面。而实际上是已经登录过了的。

排查了很久,一直没有结果,现在项目接近尾声,这个问题也必须要解决了。

跟踪了一下代码,发现,用户登录之后要记录下access_token,用于访问接口时的身份验证。一切看上去都很正常。在 utils/request.ts里做了设置,让接口请求都默认带上token信息。用起来也挺好的。

可问题就出在这里,当用户登录之后,虽然记录了access_token,但是request.ts里,只是做配置,个人认为这个配置是静态,要某个事件触发下,这里的配置才会读到token信息,从而附加到header里去。

要怎样才能动态的给header添加数据呢?找了下umi-request的官网,用拦截器可以实现。

代码如下:

/**
 * 配置request请求时的默认参数
 */
const request = extend({
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
});

// 拦截器,处理url,附加参数
request.interceptors.request.use((url, options) => {
  const headers = {
    "Authorization": "Bearer " + localStorage.getItem("auth.access_token"),
    "X-Requested-With": "XMLHttpRequest"
  };

  return {
    url: url,
    options: {...options, headers: headers},
  };
});

这里只需要附加上headers。重新登录测试,从此不用再手工刷新下了。

顺便说一下如何实现访问系统直接跳转到登录页。

其实都不用做什么,只要后端实现currentUser这个接口,并且需要身份验证,那么在请求数据的时候接口会去验证用户身份,只要验证失败,就会跳转到登录页面。

同样,还是要拦截一下错误代码,当服务器返回 401状态的时候,就重定向到登录页面。

代码如下:

/**
 * 异常处理程序
 */
const errorHandler = (error: { response: Response }): Response => {
  const { response } = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;

    if (status === 401) {
      window.location.href = "/user/login";
      return;
    }

    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  }
  return response;
};

 

两个修改都在utils/request.ts文件。

-完-