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文件。

-完-

Ant Design Pro增删改后更新列表数据的问题

Ant Design Pro V4 版本,在使用mock的时候增删改后可以自动刷新列表数据,但是接入服务器接口之后就不能自动刷新了,而是提示列表无数据。

想要自动刷新列表,需要在增删改之后添加刷新的代码。

继续阅读“Ant Design Pro增删改后更新列表数据的问题”

下载谷歌字体

首页要安装 node.js: yum install nodejs

然后安装 goog-webfont-dl
npm install -g goog-webfont-dl

接下来可以下载字体了:

例如 “http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,900”

执行:goog-webfont-dl -a -f ‘Source Sans Pro’ -y ‘300,400,600,900’

会在当前目录下生成一个css文件,和一个目录,目录里是字体文件,放到可以访问的位置,在页面里加载这个css就行了。

composer中文网的中国镜像挂了很久

一真用的composer 中文网的镜像。可是去年的某一天,发现安装不上包也更新不了包,查到一下,发现composer中文网从开始修改到恢复上线,啥也没变,就是不更了,这下可好,那些更新停止了。

找呀找,找到一个还能用的composer镜像。

https://github.com/zencodex/composer

modbus 协议 功能码 03 和 04的区别

modbus 协议 功能码 03 和 04的区别

function Code 03是用于读Holding Registers,而Function Code 04用于读Input Registers。两个功能码的区别在于使用在不同的寄存器上。
Input Register用于读取Slave的信息,长度为16-bit,只能读,不能写,地址范围是30001 – 39999。
Holding Register用于读取Slave的信息,或向Slave发送信息,长度为16-bit,可以读,也可以写,地址范围是40001 – 49999。
为什么只能用03来读数据呢?因为你要读的Slave,把数据放在了Holding Registers里,地址是4xxxx。之所以选择Holding Register,考虑到既要能读,也要能写。

谷歌字体的代理

Google Fonts

原地址:

fonts.googleapis.com/

CSS.NET 推荐

https://fonts.css.network/

中国科学技术大学

主页 https://lug.ustc.edu.cn/wiki/start

https://fonts.proxy.ustclug.org
fonts.gstatic.com       fonts-gstatic.proxy.ustclug.org
fonts.googleapis.com    fonts.proxy.ustclug.org
ajax.googleapis.com     ajax.proxy.ustclug.org

其它反向代理

registry-1.docker.io            docker.mirrors.ustc.edu.cn
packages.elastic.co             elastic.proxy.ustclug.org
ppa.launchpad.net               launchpad.proxy.ustclug.org
archive.cloudera.com/cdh5/      cloudera.proxy.ustclug.org/cdh5/
downloads.lede-project.org      lede.proxy.ustclug.org
downloads.openwrt.org           openwrt.proxy.ustclug.org
registry.npmjs.org              npmreg.proxy.ustclug.org
www.npmjs.com                   npm.proxy.ustclug.org
themes.googleusercontent.com    google-themes.proxy.ustclug.org
secure.gravatar.com             gravatar.proxy.ustclug.org