feat: add ANTD_IS_STORAGE config. #281

examples/antdp-base/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
     page: true,
     REACT_APP_ENV: true,
+    ANTD_IS_STORAGE: true,
   },
   plugins: ['prettier'],
   rules: {

examples/antdp-base/config/config.js

@@ -13,6 +13,8 @@ export default config(router, {
     ANTD_IS_TABS: true,
     // 是否展示面包屑
     ANTD_IS_BREADCRUMB: false,
+    // 默认 sessionStorage 存储，如果需要使用 localStorage 存储，设置为 `false`
+    // ANTD_IS_STORAGE: false,
     ANTD_AUTH_CONF: {
       auth_menu: 'authMenu',
       auth_btn: 'authBtn',

examples/antdp-base/package.json

@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@ant-design/pro-components": "^2.4.14",
-    "@antdp/authorized": "2.0.21",
-    "@antdp/basic-layouts": "2.0.21",
-    "@antdp/hooks": "2.0.21",
-    "@antdp/request": "2.0.21",
+    "@antdp/authorized": "2.0.24",
+    "@antdp/basic-layouts": "2.0.24",
+    "@antdp/hooks": "2.0.24",
+    "@antdp/request": "2.0.24",
     "ahooks": "~3.7.2",
     "antd": "5.6.1",
     "react": "^18.2.0",
@@ -35,15 +35,15 @@
     "antd": "5.6.1"
   },
   "devDependencies": {
-    "@antdp/config": "2.0.21",
-    "@antdp/dependencies": "2.0.21",
+    "@antdp/config": "2.0.24",
+    "@antdp/dependencies": "2.0.24",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@umijs/fabric": "~2.14.1",
+    "@umijs/fabric": "~3.0.0",
     "@umijs/max": "~4.0.47",
     "@umijs/plugin-model": "~2.6.2",
     "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-prettier": "~4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-unicorn": "^47.0.0",
     "husky": "~8.0.3",
     "lint-staged": "~13.2.2"

examples/antdp-base/src/layouts/BasicLayout.jsx

@@ -99,9 +99,10 @@ const Layout = () => {
             title: '退出登录',
             icon: <LogoutOutlined />,
             onClick: async () => {
-              await sessionStorage.removeItem('token');
-              await sessionStorage.removeItem('refresh_token');
-              await sessionStorage.removeItem('userDate');
+              const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+              await store.removeItem('token');
+              await store.removeItem('refresh_token');
+              await store.removeItem('userDate');
               update({ token: '' });
               history.push('/login');
             },

examples/antdp-base/src/layouts/UserLayout.jsx

@@ -47,9 +47,10 @@ const UserLayout = () => {
     url: '/api/users/login',
     onSuccess: async ({ code, data, token }) => {
       if (code === 1) {
-        await sessionStorage.setItem('token', token);
-        await sessionStorage.setItem('authBtn', JSON.stringify(data.btns));
-        await sessionStorage.setItem('authMenu', JSON.stringify(data.menus));
+        const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+        await store.setItem('token', token);
+        await store.setItem('authBtn', JSON.stringify(data.btns));
+        await store.setItem('authMenu', JSON.stringify(data.menus));
         update({ token: token });
         history.push('/');
       }

examples/antdp-base/src/models/user.js

@@ -1,4 +1,7 @@
-const getToken = () => sessionStorage.getItem('token');
+const getToken = () => {
+  const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+  return store.getItem('token');
+};
 export default {
   namespace: 'user',
   state: {

examples/website/.dumi/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*"]
+}

examples/website/docs/guide/config.md

@@ -87,6 +87,22 @@ export default config(router, {
 );
 ```
 
+### ANTD_IS_STORAGE
+
+默认 `sessionStorage` 存储，如果需要使用 `localStorage` 存储，设置为 `false`
+
+```diff
+import config from '@antdp/config';
+import proxy from './proxy';
+import router from './router.json';
+export default config(router, {
+  proxy,
+  define: {
++    ANTD_IS_STORAGE: false
+  },
+);
+```
+
 ### ANTD_IS_BREADCRUMB
 
 是否展示面包屑, Tab 选项卡优先级大于面包屑

examples/website/tsconfig.json

@@ -8,5 +8,5 @@
       "@@/*": [".dumi/tmp/*"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts"]
+  "include": [".dumirc.ts"]
 }

packages/authorized/README.md

@@ -15,7 +15,9 @@ $ npm i @antdp/authorized  # yarn add @antdp/authorized
 ```
 
 ## 启用方式
+
 配置开启。同时需要 config/config.ts 提供权限配置。
+
 ```diff
 import config from '@antdp/config';
 import proxy from './proxy';
@@ -41,7 +43,9 @@ export default config(router, {
 
 
 ## 路由菜单权限
+
 这是你的路由菜单（config/router.json）
+
 ```json
 [
   {
@@ -92,11 +96,12 @@ const menus = ['/', '/welcome', '/404', '/403'];
 - 1.当你登陆成功后，你需将其保存于你的sessionStorage中，储存的字段为你`ANTD_AUTH_CONF`中配的`auth_menu`字段，并在登陆后存储在`sessionStorage`中,如`sessionStorage.setItem('authMenu', JSON.stringify([]))`
 - 2.当你跳转至页面时，会根据sessionStorage中`authMenu`进行权限匹配，如果没有权限则会跳往404或403页面
 
-<strong>请保证403 和 404页面存在</strong>
-
+**请保证403 和 404页面存在**
 
 ## 页面权限重定向
-如果你想根据 `token`判断是否重定向回登陆页，可在layouts/BasicLayout.ts中添加`Authorized`
+
+如果你想根据 `token`判断是否重定向回登陆页，可在 `layouts/BasicLayout.ts` 中添加`Authorized`
+
 ```ts
 import Authorized from '@antdp/authorized';
 import BasicLayouts from '@antdp/basic-layouts';

packages/authorized/src/AuthButton.tsx

@@ -1,6 +1,8 @@
 import { useAuthorizedonfig } from "./hooks"
 import React, { useMemo } from "react";
 import { AuthList } from "./interface"
+import { store } from "./utils";
+
 export interface AuthButtonProps {
   path?: string
   children?: React.ReactNode;
@@ -10,7 +12,7 @@ export const AuthButton = (props: AuthButtonProps) => {
   const { auth_btn, auth_check_url, isCheckAuth } = useAuthorizedonfig()
 
   const authBtns: AuthList = useMemo(() => {
-    const authBtnStr = sessionStorage.getItem(auth_btn || "")
+    const authBtnStr = store.getItem(auth_btn || "")
     if (authBtnStr) {
       return JSON.parse(authBtnStr)
     }
@@ -48,7 +50,7 @@ export const getAuthButton = (path: string, other: { auth_btn?: string, auth_che
         newAuthBtn = (ANTD_AUTH_CONF as any).auth_btn
       }
     }
-    const authBtnStr = sessionStorage.getItem(newAuthBtn || "")
+    const authBtnStr = store.getItem(newAuthBtn || "")
     if (authBtnStr) {
       return JSON.parse(authBtnStr)
     }

packages/authorized/src/format.ts

@@ -1,5 +1,6 @@
 import { AuthList, GetAuthorizedPageProps } from '.';
 import { IRoute } from '@umijs/max';
+import { store } from "./utils";
 
 declare const ANTD_AUTH_CONF: {
   auth_menu: 'authMenu';
@@ -19,8 +20,8 @@ declare const ANTD_AUTH_CONF: {
 //   }
 //   if (!!ANTD_AUTH_CONF) {
 //     const authBtns: AuthList =
-//       (sessionStorage.getItem(ANTD_AUTH_CONF.auth_btn) &&
-//         JSON.parse(sessionStorage.getItem(ANTD_AUTH_CONF.auth_btn) || '[]')) ||
+//       (store.getItem(ANTD_AUTH_CONF.auth_btn) &&
+//         JSON.parse(store.getItem(ANTD_AUTH_CONF.auth_btn) || '[]')) ||
 //       [];
 //     let finx = -1;
 //     if (ANTD_AUTH_CONF.auth_check_url) {
@@ -80,8 +81,8 @@ export const getFormatPage: GetAuthorizedPageProps = (allRouters, pathname) => {
   // 4. 无权限 无页面 404
   // 5. 其他
   if (!!ANTD_AUTH_CONF) {
-    const allMenu = !!sessionStorage.getItem(ANTD_AUTH_CONF.auth_menu)
-      ? JSON.parse(sessionStorage.getItem(ANTD_AUTH_CONF.auth_menu) || '[]')
+    const allMenu = !!store.getItem(ANTD_AUTH_CONF.auth_menu)
+      ? JSON.parse(store.getItem(ANTD_AUTH_CONF.auth_menu) || '[]')
       : [];
     const check =
       mapRouterCheck(allRouters, pathname).length > 0 ? true : false;

packages/authorized/src/react-app-env.d.ts

@@ -2,3 +2,4 @@ declare var ANTD_AUTH_CONF: boolean | undefined;
 declare var ANTD_HEAD_IS_SHOW: boolean | undefined;
 declare var ANTD_MENU_IS_SHOW: boolean | undefined;
 declare var ANTD_IS_BREADCRUMB: boolean | undefined;
+declare var ANTD_IS_STORAGE: boolean | undefined;

packages/authorized/src/utils.ts

@@ -0,0 +1,2 @@
+
+export const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;

packages/basic-layouts/src/react-app-env.d.ts

@@ -3,3 +3,4 @@ declare var ANTD_HEAD_IS_SHOW: boolean | undefined;
 declare var ANTD_MENU_IS_SHOW: boolean | undefined;
 declare var ANTD_IS_BREADCRUMB: boolean | undefined;
 declare var ANTD_MENU_SEARCH_IS_SHOW: boolean | undefined;
+declare var ANTD_IS_STORAGE: boolean | undefined;

packages/basic-layouts/src/utils.tsx

@@ -47,8 +47,9 @@ export class HandleMenu {
   prePath?: string = '';
 
   constructor(props: HandleMenuProps) {
+    const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
     // 所有的 权限菜单
-    const auth_menus = sessionStorage.getItem('authMenu');
+    const auth_menus = store.getItem('authMenu');
     if (auth_menus) {
       this.authMenus = JSON.parse(auth_menus);
     } else {

packages/config/src/index.ts

@@ -14,6 +14,7 @@ export default (routes: IRoute[] = [], options: OptionsProps = {}) => {
   const defineObj = options.define || {};
   // 是否开启路由面包屑
   const ANTD_IS_BREADCRUMB = !!defineObj.ANTD_IS_BREADCRUMB;
+  const ANTD_IS_STORAGE = defineObj.ANTD_IS_STORAGE ?? true;
   // 权限配置参数
   let ANTD_AUTH_CONF = defineObj.ANTD_AUTH_CONF || false;
   if (typeof ANTD_AUTH_CONF === 'boolean' && ANTD_AUTH_CONF) {
@@ -31,6 +32,7 @@ export default (routes: IRoute[] = [], options: OptionsProps = {}) => {
       ...(ANTD_AUTH_CONF || {}),
     };
   }
+  console.log("ANTD_IS_STORAGE:", ANTD_IS_STORAGE)
 
   return defineConfig({
     hash: true,
@@ -85,6 +87,8 @@ export default (routes: IRoute[] = [], options: OptionsProps = {}) => {
       /**  是否开启菜单栏搜索 */
       ANTD_MENU_SEARCH_IS_SHOW: false,
       ...(options.define || {}),
+      /** 默认 sessionStorage 存储，如果需要使用 localStorage 存储，设置为 `false` */
+      ANTD_IS_STORAGE,
       /** 是否开启父子路由面包屑 */
       ANTD_IS_BREADCRUMB,
       /**  是否开启权限验证 */

packages/hooks/src/react-app-env.d.ts

@@ -0,0 +1 @@
+declare var ANTD_IS_STORAGE: boolean | undefined;

packages/hooks/src/react-query/fetch.ts

@@ -17,7 +17,8 @@ function getFetchOption(type: ReactQueryOptions['contentType'] = 'json', option:
     };
   }
   option.headers = new Headers({ ...option.headers || {} });
-  const token = sessionStorage.getItem("token");
+  const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+  const token = store.getItem("token");
   if (token && !option.headers.get('Authorization')) {
     option.headers.set('Authorization', `Bearer ${token}`);
   }

packages/request/src/index.tsx

@@ -60,7 +60,8 @@ request.interceptors.request.use((url: string, options: any) => {
 request.interceptors.response.use(async (response) => {
   let token = getToken();
   if (token) {
-    sessionStorage.setItem('token', token);
+    const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+    store.setItem('token', token);
   }
   const data = await response.clone().json();
   if ((data && data?.code)) {

packages/request/src/react-app-env.d.ts

@@ -0,0 +1 @@
+declare var ANTD_IS_STORAGE: boolean | undefined;

packages/request/src/utils/index.tsx

@@ -1,7 +1,9 @@
 import { message } from 'antd';
 
+const store = ANTD_IS_STORAGE ? sessionStorage : localStorage;
+
 export const getToken = () => {
-  const token = sessionStorage.getItem("token")
+  const token = store.getItem("token")
   return token
 }
 
@@ -11,7 +13,7 @@ export const setToken = () => {
 }
 
 export const saveToken = (value: string) => {
-  sessionStorage.setItem('token', value)
+  store.setItem('token', value)
 }
 
 export const codeMessage: Record<number, string> = {