更新

src/helpers/request.ts

@@ -1,6 +1,9 @@
+import { getToken, removeToken } from './../utils/auth';
 import { extend } from 'umi-request'
 import { ElMessage } from 'element-plus'
 import cleanDeep from 'clean-deep'
+import router from '../router';
+import { showLoading, hideLoading } from '../utils/loading'
 // import { setLogout } from 'src/actions/users'
 // import store from 'src/store'
 
@@ -23,7 +26,11 @@ const request = extend({
 })
 
 request.interceptors.request.use((url, options: any) => {
-  const Authorization = (localStorage.getItem('Authorization') || '')
+  let hideLoading = options.hideLoading || false
+  if(!hideLoading) {
+    showLoading()
+  }
+  const Authorization = getToken()
   const tenantId = (localStorage.getItem('tenantId') || '')
   const organId = (localStorage.getItem('organId') || '')
   const authHeaders: any = {}
@@ -50,6 +57,9 @@ request.interceptors.request.use((url, options: any) => {
 })
 
 request.interceptors.response.use(async (res, options) => {
+  setTimeout(() => {
+    hideLoading()
+  }, 200)
   const url = new URL(res.url)
   if (res.status > 299 || res.status < 200) {
     const msg = '服务器错误，状态码' + res.status
@@ -59,11 +69,15 @@ request.interceptors.response.use(async (res, options) => {
   const data = await res.clone().json()
   if (data.code !== 200 && data.errCode !== 0) {
     const msg = data.msg || '处理失败，请重试'
-    // const state: any = store.getState()
-    // if (data.code === 401 && state.user.status === 'login' && url.pathname !== '/api-auth/exit') {
-    //   const { dispatch }: any = store
-    //   dispatch(setLogout())
-    // }
+    if(data.code === 401 || data.code === 403) {
+      ElMessage.error(`登录过期，请重新登录！`)
+      removeToken()
+      router.push('/login')
+    }
+    if(data.code === 404) {
+      ElMessage.error(`请求资源不存在！`)
+      router.push('/404')
+    }
     if (!(data.code === 403 || data.code === 401)) {
       ElMessage.error(msg)
     }

src/main.ts

@@ -5,7 +5,7 @@ import App from './App.vue'
 import router from './router'
 import 'element-plus/dist/index.css'
 import './permission'
-import './icons' // icon
+// import './icons' // icon
 import './base.css'
 
 createApp(App)

src/pages/login/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from "vue"
 import { ElForm, ElFormItem, ElInput, ElMessage } from "element-plus";
 import styles from './index.module.less'
 import request from "/src/helpers/request";
+import { setToken } from "/src/utils/auth";
 
 
 export default defineComponent({
@@ -68,7 +69,7 @@ export default defineComponent({
       (this as any).$refs.loginForm.validate(async (valid: any) => {
         if (valid) {
           try {
-            const res = await request.post('/api-auth/usernameLogin', {
+            const res: any = await request.post('/api-auth/usernameLogin', {
               data: {
                 username: loginForm.username,
                 password: loginForm.password,
@@ -76,8 +77,12 @@ export default defineComponent({
                 clientSecret: "teacher"
               }
             })
+            console.log(res, 'res');
+            let token: string = res?.data.authentication.token_type + ' ' + res?.data.authentication.access_token;
+            console.log(token);
+            setToken(token)
             ElMessage.success('登录成功')
-            this.$router.push({ path: "/main/main" });
+            this.$router.push({ path: "/home" });
             console.log(res)
           } catch (error) {
             // console.log(error)

src/permission.ts

@@ -5,12 +5,12 @@ import { ElMessage } from "element-plus";
 import { state } from "./state";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
-import { getToken } from "./utils/auth";
+import { getToken, removeToken } from "./utils/auth";
 // import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
-const whiteList = ["/login", '/']; // no redirect whitelist
+const whiteList = ["/login"]; // no redirect whitelist
 
 router.beforeEach(async (to, from, next) => {
   // from.query = to.query
@@ -34,6 +34,7 @@ router.beforeEach(async (to, from, next) => {
           // 异步获取用户信息
           await request.get('/api-web/employee/queryUserInfo').then(res => {
             console.log(res)
+            state.user = res.data
           })
           next({ ...to, replace: true });
         } catch (error: any) {
@@ -42,6 +43,7 @@ router.beforeEach(async (to, from, next) => {
           if (error.msg) {
             ElMessage.error(error.msg);
           }
+          removeToken();
           next(`/login`);
           NProgress.done();
         }

src/utils/auth.ts

@@ -4,25 +4,25 @@ const TokenKeyMain = 'dy_admin_token'
 const TokenKey = 'live_admin_token'
 
 export const getToken = () => {
-
-  return localStorage.getItem('Authorization')
+  const mainToken = Cookies.get(TokenKeyMain)
+  const token = localStorage.getItem(TokenKey)
+  let returnToken: string | null = null
+  if (token) {
+    returnToken = token
+  } else if (mainToken) {
+    // 如果有主系统的token，则设置为主系统的token
+    localStorage.setItem(TokenKey, mainToken)
+    returnToken = mainToken
+  }
+  return returnToken
 }
 
-export function setToken (token) {
-  return Cookies.set(TokenKey, token)
+export function setToken (token: string) {
+  return localStorage.setItem(TokenKey, token)
 }
 
 export function removeToken () {
-  return Cookies.remove(TokenKey)
-}
-
-export function removeTenant() {
-  // 移除跟机构相关信息
-  sessionStorage.removeItem('tenantRenewStatus')
-  sessionStorage.removeItem('tenantConfig')
-  sessionStorage.removeItem('baseTenantId')
+  Cookies.remove(TokenKeyMain)
+  return localStorage.removeItem(TokenKey)
 }
 
-export function removeCrossToken () {
-  return Cookies.remove(CrossTokenKey, { domain: getCookieDomain() })
-}

src/utils/loading.ts

@@ -0,0 +1,35 @@
+/**
+ * 全局loading效果：合并多次loading请求，避免重复请求
+ * 当调用一次showLoading，则次数+1；当次数为0时，则显示loading
+ * 当调用一次hideLoading，则次数-1; 当次数为0时，则结束loading
+ */
+import { ElLoading } from "element-plus";
+
+// 定义一个请求次数的变量，用来记录当前页面总共请求的次数
+let loadingRequestCount = 0;
+// 初始化loading
+let loadingInstance: any;
+
+// 编写一个显示loading的函数 并且记录请求次数 ++
+const showLoading = (target: any) => {
+  if (loadingRequestCount === 0) {
+    // element的服务方式 target 我这边取的是表格class
+    // 类似整个表格loading和在表格配置v-loading一样的效果，这么做是全局实现了，不用每个页面单独去v-loading
+    const params = Object.assign({lock: true,
+      text: '加载中...',
+      background: 'rgba(0, 0, 0, 0.7)'}, target);
+    loadingInstance = ElLoading.service({ ...params });
+  }
+  loadingRequestCount++;
+};
+
+// 编写一个隐藏loading的函数，并且记录请求次数 --
+const hideLoading = () => {
+  if (loadingRequestCount <= 0) return;
+  loadingRequestCount--;
+  if (loadingRequestCount === 0) {
+    loadingInstance.close();
+  }
+};
+
+export { showLoading, hideLoading };

yarn.lock

@@ -1089,6 +1089,11 @@
   resolved "https://registry.npmmirror.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/js-cookie@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/@types/js-cookie/-/js-cookie-3.0.1.tgz#04aa743e2e0a85a22ee9aa61f6591a8bc19b5d68"
+  integrity sha512-7wg/8gfHltklehP+oyJnZrz9XBuX5ZPP4zB6UsI84utdlkRYLnOm2HfpLXazTwZA+fpGn0ir8tGNgVnMEleBGQ==
+
 "@types/node@*", "@types/node@^17.0.17":
   version "17.0.18"
   resolved "https://registry.npmmirror.com/@types/node/-/node-17.0.18.tgz#3b4fed5cfb58010e3a2be4b6e74615e4847f1074"
@@ -2472,6 +2477,11 @@ minimist@^1.2.5:
   resolved "https://registry.npmmirror.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"