feat: 更改权限判断引入对应的封装好的storage

package.json

@@ -9,7 +9,7 @@
     "deploy:qa": "cross-env REACT_APP_ENV=qa auto-deploy build -t qa",
     "deploy:prod": "auto-deploy build -t prod",
     "deploy-gh-pages": "npm run site && npm run gh-pages",
-    "dev": "npm run start:dev",
+    "dev": "cross-env REACT_APP_ENV=dev npm run start:dev",
     "fetch:blocks": "pro fetch-blocks && npm run prettier",
     "gh-pages": "gh-pages -d dist",
     "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
@@ -57,6 +57,7 @@
     "ahooks": "^2.10.0",
     "antd": "^4.8.0",
     "classnames": "^2.2.6",
+    "crypto-js": "^4.0.0",
     "dayjs": "^1.10.4",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",

src/app.tsx

@@ -1,9 +1,5 @@
-// export function onRouteChange({ matchedRoutes }) {
-//   console.log('222')
-// }
-
 import { apiGetRoles } from './services/user'
-import { setAuthority } from './utils/authority'
+import { setAuthority } from './utils/auth/authority'
 
 export function render(oldRender) {
   if (window.location.pathname !== '/user/login') {

src/basic/consts.js

@@ -1,11 +1,11 @@
-export default {
-  // 基础设置
-  VERSION: '1.0.0',
-  NAME: '', // 应用名称
-  TOKEN_KEY: 'Authorization', // token的键值
-  TOKEN_API: '/api/login/token', // 获取token令牌
-  LOGIN_PATH: '/login', //
-  TOKEN_INVALID_CODE: [ 2, 3 ], // 接口返回码如果是2, 3 则表明token过期或无效 需要自动刷新token
-  TOKEN_WHITE_LIST: [ '/api/login' ], // 不需要设置token的白名单
-  RET_CODE: { SUCCESS: 0, FAIL: 1, TOKEN_UNDEFINED: 19, TOKEN_EXPIRED: 2 } // 返回RET状态码解析
-}
+export default {
+  // 基础设置
+  VERSION: '1.0.0',
+  NAME: '', // 应用名称
+  TOKEN_HEADER: 'Authorization', // token的键值
+  TOKEN_API: '/api/login/token', // 获取token令牌
+  LOGIN_PATH: '/login', //
+  TOKEN_INVALID_CODE: [2, 3], // 接口返回码如果是2, 3 则表明token过期或无效 需要自动刷新token
+  TOKEN_WHITE_LIST: ['/api/login'], // 不需要设置token的白名单
+  RET_CODE: { SUCCESS: 0, FAIL: 1, TOKEN_UNDEFINED: 19, TOKEN_EXPIRED: 2 } // 返回RET状态码解析
+}

src/basic/utils/request.js

@@ -4,8 +4,10 @@
  */
 import { extend } from 'umi-request'
 import { message, notification } from 'antd'
-import { getTokenid, getUserAccount, redirectToLogin, saveTokenId } from './common'
+import { getUserAccount, redirectToLogin } from './common'
 import consts from '@/consts'
+import { getToken, setAuthCache } from '@/utils/auth'
+import { TOKEN_KEY } from '@/utils/cache/cacheEnum'
 
 const RETRY_TOKEN_TIME = 3 // 重新获取token次数
 let currentTokenRetry = RETRY_TOKEN_TIME // 当前token刷新次数
@@ -72,14 +74,14 @@ async function apiGetToken() {
 
 // 请求拦截器
 request.interceptors.request.use((url, options) => {
-  const token = getTokenid()
+  const token = getToken()
   if (token) {
     // 在白名单里的请求放过
     if (consts.TOKEN_WHITE_LIST.includes(url)) {
       return { url, options }
     }
     // eslint-disable-next-line no-param-reassign
-    options.headers[consts.TOKEN_KEY] = `bearer ${token}`
+    options.headers[consts.TOKEN_HEADER] = `bearer ${token}`
     return { url, options }
   }
   return { url, options }
@@ -94,7 +96,6 @@ const refreshTokenIfNeed = async (response, config) => {
     message.error((res && res.msg) || '请求错误')
     return response
   }
-
   if (res && res.code && consts.TOKEN_INVALID_CODE.includes(res.code)) {
     const account = getUserAccount()
     if (!account || !currentTokenRetry) {
@@ -108,7 +109,7 @@ const refreshTokenIfNeed = async (response, config) => {
       currentTokenRetry = RETRY_TOKEN_TIME // 重置token重试次数
       // 刷新token成功，保存token
       const token = data.data && data.data.token
-      saveTokenId(token)
+      setAuthCache(TOKEN_KEY, token)
       // 重新发起请求
       const newResponse = await request(response.url, config)
       return newResponse

src/layouts/BasicLayout.jsx

@@ -8,7 +8,7 @@ import zhCN from 'antd/lib/locale/zh_CN'
 import React, { useMemo, useRef } from 'react'
 import { Link, useIntl, connect, history } from 'umi'
 import { Result, ConfigProvider } from 'antd'
-import Authorized from '@/utils/Authorized'
+import Authorized from '@/utils/auth/Authorized'
 import RightContent from '@/components/GlobalHeader/RightContent'
 import logo from '../assets/logo.svg'
 import styles from './BasicLayout.less'
@@ -96,7 +96,7 @@ const BasicLayout = props => {
       {...props}
       {...settings}
       onCollapse={handleMenuCollapse}
-      onMenuHeaderClick={() => history.push('/workbench/dashboard')}
+      onMenuHeaderClick={() => history.push('/')}
       menuItemRender={(menuItemProps, defaultDom) => {
         if (menuItemProps.isUrl || !menuItemProps.path) {
           return defaultDom

src/models/user.js

@@ -1,11 +1,13 @@
-import { getTokenid, removeTokenId, saveTokenId } from '@/basic/utils/common'
 import consts from '@/consts'
 import { apiLogin } from '@/services/login'
 import { apiCurrent, apiGetRoles } from '@/services/user'
+import { clearAuthCache, getToken, setAuthCache } from '@/utils/auth'
 import { getPageQuery } from '@/utils/utils'
 import { message } from 'antd'
 import { stringify } from 'qs'
 import { history } from 'umi'
+import { TOKEN_KEY } from '@/utils/cache/cacheEnum'
+import { setAuthority } from '@/utils/auth/authority'
 
 const UserModel = {
   namespace: 'user',
@@ -26,7 +28,7 @@ const UserModel = {
       }
       if (response?.code === consts.RET_CODE.SUCCESS) {
         // Login successfully
-        saveTokenId(response.data.token)
+        setAuthCache(TOKEN_KEY, response.data.token)
         const { data: currentAuthority = [] } = yield call(apiGetRoles)
         yield put({
           type: 'changeLoginStatus',
@@ -36,7 +38,6 @@ const UserModel = {
         const params = getPageQuery()
         message.success('🎉 🎉 🎉  登录成功')
         let { redirect } = params
-
         if (redirect) {
           const redirectUrlParams = new URL(redirect)
           if (redirectUrlParams.origin === urlParams.origin) {
@@ -57,7 +58,7 @@ const UserModel = {
     logout() {
       const { redirect } = getPageQuery() // Note: There may be security issues, please note
       if (window.location.pathname !== '/user/login' && !redirect) {
-        removeTokenId()
+        clearAuthCache()
         history.replace({
           pathname: '/user/login',
           search: stringify({
@@ -71,7 +72,7 @@ const UserModel = {
       if (window.location.pathname === '/user/login') {
         return
       }
-      const token = getTokenid()
+      const token = getToken()
       if (!token) {
         history.replace('/user/login')
         return
@@ -82,26 +83,18 @@ const UserModel = {
           type: 'saveCurrentUser',
           payload: response.data
         })
-        // const { loginStatus } = yield select(state => state.user)
-        // if (!loginStatus) {
-        //   const { data: currentAuthority = [] } = yield call(apiGetRoles)
-        //   yield put({
-        //     type: 'changeLoginStatus',
-        //     payload: { status: consts.RET_CODE.SUCCESS, currentAuthority }
-        //   })
-        // }
       }
     }
   },
   reducers: {
     saveCurrentUser(state, action) {
       return { ...state, currentUser: action.payload || {} }
-    }
+    },
 
-    // changeLoginStatus(state, { payload }) {
-    //   setAuthority(payload.currentAuthority)
-    //   return { ...state, loginStatus: payload.status }
-    // }
+    changeLoginStatus(state, { payload }) {
+      setAuthority(payload.currentAuthority)
+      return { ...state, loginStatus: payload.status }
+    }
   }
 }
 export default UserModel

src/settings/projectSetting.ts

@@ -6,3 +6,5 @@ import { CacheTypeEnum } from '@/utils/cache/cacheEnum'
 const setting: ProjectConfig = {
   permissionCacheType: CacheTypeEnum.LOCAL
 }
+
+export default setting

src/utils/authority.js

@@ -1,15 +1,17 @@
+import { getAuthCache, setAuthCache } from './index'
+import { ROLES_KEY } from '../cache/cacheEnum'
 import { reloadAuthorized } from './Authorized' // use localStorage to store the authority info, which might be sent from server in actual project.
 
 export async function getAuthority() {
-  const authority = JSON.parse(localStorage.getItem('authority')) || []
+  const authority = getAuthCache(ROLES_KEY)
   if (typeof authority === 'string') {
     return [authority]
   }
   return authority
 }
 export function setAuthority(authority) {
+  console.log('setAuthority', authority)
   const proAuthority = typeof authority === 'string' ? [authority] : authority
-  localStorage.setItem('authority', JSON.stringify(proAuthority)) // auto reload
-
+  setAuthCache(ROLES_KEY, proAuthority)
   reloadAuthorized()
 }

src/utils/auth/index.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+
+import { Persistent, BasicKeys } from '@/utils/cache/persistent'
+import projectSetting from '@/settings/projectSetting'
+import { TOKEN_KEY, CacheTypeEnum } from '@/utils/cache/cacheEnum'
+
+const { permissionCacheType } = projectSetting
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL
+
+export function getToken() {
+  return getAuthCache(TOKEN_KEY)
+}
+
+export function getAuthCache<T>(key: BasicKeys) {
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession
+  return fn(key) as T
+}
+
+export function setAuthCache(key: BasicKeys, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession
+  return fn(key, value, true)
+}
+
+export function clearAuthCache(immediate = true) {
+  const fn = isLocal ? Persistent.clearLocal : Persistent.clearSession
+  return fn(immediate)
+}

src/utils/cache/persistent.ts

@@ -2,8 +2,9 @@
 
 import { Memory } from './memory'
 
-import { createLocalStorage, createSessionStorage } from '/@/utils/cache'
+import { createLocalStorage, createSessionStorage } from '@/utils/cache'
 import { TOKEN_KEY, ROLES_KEY, APP_LOCAL_CACHE_KEY, APP_SESSION_CACHE_KEY } from './cacheEnum'
+import { DEFAULT_CACHE_TIME } from '@/settings/encryptionSetting'
 import { pick, omit } from 'lodash-es'
 
 interface BasicStore {
@@ -22,6 +23,9 @@ type SessionKeys = keyof SessionStore
 const ls = createLocalStorage()
 const ss = createSessionStorage()
 
+const localMemory = new Memory(DEFAULT_CACHE_TIME)
+const sessionMemory = new Memory(DEFAULT_CACHE_TIME)
+
 function initPersistentMemory() {
   const localCache = ls.get(APP_LOCAL_CACHE_KEY)
   const sessionCache = ss.get(APP_SESSION_CACHE_KEY)
@@ -81,11 +85,11 @@ window.addEventListener('beforeunload', function () {
   // TOKEN_KEY 在登录或注销时已经写入到storage了，此处为了解决同时打开多个窗口时token不同步的问题
   // LOCK_INFO_KEY 在锁屏和解锁时写入，此处也不应修改
   ls.set(APP_LOCAL_CACHE_KEY, {
-    ...omit(localMemory.getCache, LOCK_INFO_KEY),
+    ...omit(localMemory.getCache),
     ...pick(ls.get(APP_LOCAL_CACHE_KEY), [TOKEN_KEY])
   })
   ss.set(APP_SESSION_CACHE_KEY, {
-    ...omit(sessionMemory.getCache, LOCK_INFO_KEY),
+    ...omit(sessionMemory.getCache),
     ...pick(ss.get(APP_SESSION_CACHE_KEY), [TOKEN_KEY])
   })
 })

src/utils/env.ts

@@ -7,12 +7,12 @@ export function getStorageShortName() {
 /**
  * @description: Development model
  */
-export const devMode = 'dev'
+export const devMode = 'development'
 
 /**
  * @description: Production mode
  */
-export const prodMode = 'prod'
+export const prodMode = 'production'
 /**
  * @description: Get environment variables
  * @returns:
@@ -28,8 +28,8 @@ export function getEnv(): string {
  * @example:
  */
 export function isDevMode(): boolean {
-  const { REACT_APP_ENV } = process.env
-  return REACT_APP_ENV === 'dev'
+  const { NODE_ENV } = process.env
+  return NODE_ENV === devMode
 }
 
 /**
@@ -38,6 +38,6 @@ export function isDevMode(): boolean {
  * @example:
  */
 export function isProdMode(): boolean {
-  const { REACT_APP_ENV } = process.env
-  return REACT_APP_ENV === 'prod'
+  const { NODE_ENV } = process.env
+  return NODE_ENV === prodMode
 }