Ant Design Pro 运用点滴 [6]

权限登录问题

前段时间ant design pro大版本升级，我也紧跟上来。我把企业微信的登录又梳理了一遍。今天碰到了权限登录的问题。

问题

src/utils/authority.js中getAuthority方法，可以从localStorage直接获取。如果我在本地直接修改相应的值，就可以登录了，显得不是很安全~~

...
const authorityString =
   typeof str === 'undefined' ? localStorage.getItem('antd-pro-authority') : str;
 ...

显然，开发者知道这个问题，在注释中也写了可以从服务端获得权限

问题在于，如果使用系统的request工具，是异步获取。所以没等服务器的值返回，界面就加载完成直接跳转了。（在这里坑了我好久）

解决方式

我从github的issue查到了一些解决思路。有两种，一种呢最外面加一个loading（我现在还没整明白怎么搞），另外一种就是采用同步获取方式，获取值。
看下面代码
services/api.js

/**
 * 从服务端获取权限组名称
 *  同步 请求
 */
export function fakeAuthority() {
  let res = 'guest';
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/apiv1/login/getAuthority', false);
  xhr.onreadystatechange = () => {
    // readyState == 4说明请求已完成
    if ((xhr.readyState === 4 && xhr.status === 200) || xhr.status === 304) {
      res = xhr.responseText;
    }
  };
  xhr.send();
  return res;
}

src/utils/authority.js 修改一下

import { fakeAuthority } from '@/services/api';

export function getAuthority() {
  const authorityString = fakeAuthority(); 
  let authority;
  try {
    authority = JSON.parse(authorityString);
  } catch (e) {
    authority = authorityString;
  }
  return typeof authority === 'string' ? [authority] : authority; 
}

如此就可以实现从服务端获取权限了。