refactor: permission (#357)

* refactor: permission * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * fix: 修复`mix`混合模式导航在生产环境左侧菜单一定机率不显示的问题 * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update
2025-11-09 13:53:38 +08:00 · 2022-10-25 12:17:13 +08:00
parent cedc84d31a
commit 6ef4cf9fb6
47 changed files with 605 additions and 386 deletions
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,42 +1,72 @@
 import Cookies from "js-cookie";
+import { storageSession } from "@pureadmin/utils";
 import { useUserStoreHook } from "/@/store/modules/user";

-const TokenKey = "authorized-token";
-
-type paramsMapType = {
-  name: string;
-  expires: number;
+export interface DataInfo<T> {
+  /** token */
  accessToken: string;
-};
-
-/** 获取token */
-export function getToken() {
-  // 此处与TokenKey相同，此写法解决初始化时Cookies中不存在TokenKey报错
-  return Cookies.get("authorized-token");
+  /** `accessToken`的过期时间（时间戳） */
+  expires: T;
+  /** 用于调用刷新accessToken的接口时所需的token */
+  refreshToken: string;
+  /** 用户名 */
+  username?: string;
+  /** 当前登陆用户的角色 */
+  roles?: Array<string>;
 }

-/** 设置token以及过期时间（cookies、sessionStorage各一份），后端需要将用户信息和token以及过期时间都返回给前端，过期时间主要用于刷新token */
-export function setToken(data) {
-  const { accessToken, expires, name } = data;
-  // 提取关键信息进行存储
-  const paramsMap: paramsMapType = {
-    name,
-    expires: Date.now() + parseInt(expires),
-    accessToken
-  };
-  const dataString = JSON.stringify(paramsMap);
-  useUserStoreHook().SET_TOKEN(accessToken);
-  useUserStoreHook().SET_NAME(name);
+export const sessionKey = "user-info";
+export const TokenKey = "authorized-token";
+
+/** 获取`token` */
+export function getToken(): DataInfo<number> {
+  // 此处与`TokenKey`相同，此写法解决初始化时`Cookies`中不存在`TokenKey`报错
+  return Cookies.get(TokenKey)
+    ? JSON.parse(Cookies.get(TokenKey))
+    : storageSession.getItem(sessionKey);
+}
+
+/**
+ * @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
+ * 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
+ * 将`accessToken`、`expires`这两条信息放在key值为authorized-token的cookie里（过期自动销毁）
+ * 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的sessionStorage里（浏览器关闭自动销毁）
+ */
+export function setToken(data: DataInfo<Date>) {
+  let expires = 0;
+  const { accessToken, refreshToken } = data;
+  expires = new Date(data.expires).getTime();
+  const cookieString = JSON.stringify({ accessToken, expires });
+
  expires > 0
-    ? Cookies.set(TokenKey, dataString, {
-        expires: expires / 86400000
+    ? Cookies.set(TokenKey, cookieString, {
+        expires: (expires - Date.now()) / 86400000
      })
-    : Cookies.set(TokenKey, dataString);
-  sessionStorage.setItem(TokenKey, dataString);
+    : Cookies.set(TokenKey, cookieString);
+
+  function setSessionKey(username: string, roles: Array<string>) {
+    useUserStoreHook().SET_USERNAME(username);
+    useUserStoreHook().SET_ROLES(roles);
+    storageSession.setItem(sessionKey, {
+      refreshToken,
+      expires,
+      username,
+      roles
+    });
+  }
+
+  if (data.username && data.roles) {
+    const { username, roles } = data;
+    setSessionKey(username, roles);
+  } else {
+    const { username, roles } =
+      storageSession.getItem<DataInfo<number>>(sessionKey);
+    setSessionKey(username, roles);
+  }
 }

-/** 删除token */
+/** 删除`token`以及key值为`user-info`的session信息 */
 export function removeToken() {
  Cookies.remove(TokenKey);
-  sessionStorage.removeItem(TokenKey);
+  sessionStorage.removeItem(sessionKey);
 }
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
@@ -1,6 +1,5 @@
 import Axios, { AxiosInstance, AxiosRequestConfig } from "axios";
 import {
-  resultType,
  PureHttpError,
  RequestMethods,
  PureHttpResponse,
@@ -21,7 +20,7 @@ const defaultConfig: AxiosRequestConfig = {
  //   process.env.NODE_ENV === "production"
  //     ? VITE_PROXY_DOMAIN_REAL
  //     : VITE_PROXY_DOMAIN,
-  // 当前使用mock模拟请求，将baseURL制空，如果你的环境用到了http请求，请删除下面的baseURL启用上面的baseURL，并将11行、16行代码注释取消
+  // 当前使用mock模拟请求，将baseURL制空，如果你的环境用到了http请求，请删除下面的baseURL启用上面的baseURL，并将第10行、15行代码注释取消
  baseURL: "",
  timeout: 10000,
  headers: {
@@ -47,7 +46,7 @@ class PureHttp {
  /** 请求拦截 */
  private httpInterceptorsRequest(): void {
    PureHttp.axiosInstance.interceptors.request.use(
-      (config: PureHttpRequestConfig) => {
+      async (config: PureHttpRequestConfig) => {
        const $config = config;
        // 开启进度条动画
        NProgress.start();
@@ -60,26 +59,33 @@ class PureHttp {
          PureHttp.initConfig.beforeRequestCallback($config);
          return $config;
        }
-        const token = getToken();
-        if (token) {
-          const data = JSON.parse(token);
-          const now = new Date().getTime();
-          const expired = parseInt(data.expires) - now <= 0;
-          if (expired) {
-            // token过期刷新
-            useUserStoreHook()
-              .refreshToken(data)
-              .then((res: resultType) => {
-                config.headers["Authorization"] = "Bearer " + res.accessToken;
-                return $config;
-              });
-          } else {
-            config.headers["Authorization"] = "Bearer " + data.accessToken;
-            return $config;
-          }
-        } else {
-          return $config;
-        }
+        /** 请求白名单（通过设置请求白名单，防止token过期后再请求造成的死循环问题） */
+        const whiteList = ["/refreshToken", "/login"];
+        return whiteList.some(v => config.url.indexOf(v) > -1)
+          ? config
+          : new Promise(resolve => {
+              const data = getToken();
+              if (data) {
+                const now = new Date().getTime();
+                const expired = parseInt(data.expires) - now <= 0;
+                if (expired) {
+                  // token过期刷新
+                  useUserStoreHook()
+                    .handRefreshToken({ refreshToken: data.refreshToken })
+                    .then(res => {
+                      config.headers["Authorization"] =
+                        "Bearer " + res.data.accessToken;
+                      resolve($config);
+                    });
+                } else {
+                  config.headers["Authorization"] =
+                    "Bearer " + data.accessToken;
+                  resolve($config);
+                }
+              } else {
+                resolve($config);
+              }
+            });
      },
      error => {
        return Promise.reject(error);