許可權登入問題

前段時間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; 
}

如此就可以實現從服務端獲取許可權了。