From a146e6bc18add958edd3117b325d950e16191c67 Mon Sep 17 00:00:00 2001
From: h_mo <596417202@qq.com>
Date: Sun, 12 Jun 2022 12:51:52 +0800
Subject: [PATCH] =?UTF-8?q?perf-=E7=99=BB=E5=BD=95/request=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  3 +
 src/env.d.ts                                  |  2 -
 src/pages/index/index.vue                     | 22 ------
 src/pages/login/index.vue                     | 36 +++++-----
 src/services/api/auth.ts                      | 31 ++++++++
 src/services/api/user.ts                      |  6 --
 .../model/{user.d.ts => authModel.d.ts}       |  0
 src/services/model/baseModel.d.ts             |  2 +-
 src/services/model/userModel.d.ts             |  0
 src/settings/encryptionSetting.ts             |  6 +-
 src/state/modules/auth.ts                     | 70 +++++++++++++++++++
 src/state/modules/user.ts                     | 31 ++------
 src/utils/auth.ts                             |  4 ++
 src/utils/env.ts                              | 18 +++--
 src/utils/http/core/Request.ts                |  4 +-
 src/utils/http/index.ts                       | 12 ++--
 src/utils/log.ts                              |  4 +-
 17 files changed, 162 insertions(+), 89 deletions(-)
 create mode 100644 src/services/api/auth.ts
 rename src/services/model/{user.d.ts => authModel.d.ts} (100%)
 create mode 100644 src/services/model/userModel.d.ts
 create mode 100644 src/state/modules/auth.ts
 create mode 100644 src/utils/auth.ts

diff --git a/src/App.vue b/src/App.vue
index f82fe70..91a409f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
   import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
+  import { useAuthStore } from '@/state/modules/auth';
 
   onLaunch(() => {
     console.log('App Launch');
   });
   onShow(() => {
+    const authStore = useAuthStore();
+    authStore.initToken();
     console.log('App Show');
   });
   onHide(() => {
diff --git a/src/env.d.ts b/src/env.d.ts
index cb94a12..9be13c6 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,7 +1,5 @@
 // / <reference types="vite/client" />
 
-import { DEFAULT_PREFIX_KEY } from '@/settings/encryptionSetting';
-
 declare module '*.vue' {
   import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 693e734..1ef70f1 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -16,38 +16,16 @@
   import { ref, reactive } from 'vue';
   import Test from '@/components/test/Test.vue';
   const title = ref('Hello');
-  const url = import.meta.env.VITE_BASE_URL;
-  console.log('url', url);
   type Data = {
     token: string;
   };
 
   const jumLogin = () => {
     console.log('/pages/login/index');
-
     uni.navigateTo({
       url: '/pages/login/index',
     });
   };
-
-  import { request } from '@/utils/http/index';
-  const form = reactive({
-    email: 'catch@admin.com',
-    password: 'catchadmin',
-  });
-  const loginType = ref('');
-  const submit = () => {
-    request
-      .post<Data>('/login', form)
-      .then((res) => {
-        loginType.value = '登录成功';
-        console.log(res.data.token);
-      })
-      .catch((err: any) => {
-        loginType.value = '登录失败';
-        console.log(err.message);
-      });
-  };
 </script>
 
 <style lang="scss">
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 1ac89d5..ee6f00b 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -9,7 +9,8 @@
         >密码:
         <input class="border border-gray-500" v-model="form.password" type="text" />
       </label>
-      <button @tap="submit">login</button>
+      <button v-if="isLogin" @tap="loginOut">login out</button>
+      <button v-else @tap="submit">login</button>
       {{ loginType }}
       <view>{{ token }}---</view>
     </view>
@@ -18,29 +19,28 @@
 
 <script setup lang="ts">
   import { reactive, ref } from 'vue';
-  import { request } from '@/utils/http/index';
-  import { useUserStore } from '@/state/modules/user';
+  import { useAuthStore } from '@/state/modules/auth';
   const form = reactive({
     email: 'catch@admin.com',
     password: 'catchadmin',
   });
   const loginType = ref('');
-  const token = ref<string>('');
-  const userStore = useUserStore();
+
+  const authStore = useAuthStore();
+
+  const token = ref<string | undefined>(authStore.getToken);
+  const isLogin = ref<boolean>(authStore.isLogin);
   const submit = () => {
-    userStore.login(form);
-    // request
-    //   .post('/login', form)
-    //   .then((res: any) => {
-    //     loginType.value = '登录成功';
-    //     console.log(res);
-    //     userStore.setToken(res.data.token);
-    //     token.value = userStore.getToken;
-    //   })
-    //   .catch((err: any) => {
-    //     loginType.value = '登录失败';
-    //     console.log(err.message);
-    //   });
+    authStore.login(form).then((res) => {
+      token.value = res.token;
+      isLogin.value = authStore.isLogin;
+    });
+  };
+  const loginOut = () => {
+    authStore.loginOut().then((res) => {
+      token.value = res.token;
+      isLogin.value = authStore.isLogin;
+    });
   };
 </script>
 
diff --git a/src/services/api/auth.ts b/src/services/api/auth.ts
new file mode 100644
index 0000000..5d78ad7
--- /dev/null
+++ b/src/services/api/auth.ts
@@ -0,0 +1,31 @@
+import { request } from '@/utils/http';
+
+const LOGIN = '/login';
+const LOGIN_OUT = '/logout';
+const REFRESH_TOKEN = '/refresh/token';
+
+/**
+ * 登录
+ * @param params
+ */
+export function login(params: LoginParams) {
+  return request.post<API<LoginModel>>(LOGIN, params, {
+    custom: {
+      auth: false,
+    },
+  });
+}
+
+/**
+ * 登出
+ */
+export function logout() {
+  return request.post<API>(LOGIN_OUT, {});
+}
+
+/**
+ * 刷新token
+ */
+export function refreshToken() {
+  return request.post<API<LoginModel>>(REFRESH_TOKEN, {});
+}
diff --git a/src/services/api/user.ts b/src/services/api/user.ts
index 06c6cb6..2be05ab 100644
--- a/src/services/api/user.ts
+++ b/src/services/api/user.ts
@@ -1,7 +1 @@
 import { request } from '@/utils/http';
-
-const LOGIN = '/login';
-
-export function login(params: LoginParams) {
-  return request.post<API<LoginModel>>(LOGIN, params);
-}
diff --git a/src/services/model/user.d.ts b/src/services/model/authModel.d.ts
similarity index 100%
rename from src/services/model/user.d.ts
rename to src/services/model/authModel.d.ts
diff --git a/src/services/model/baseModel.d.ts b/src/services/model/baseModel.d.ts
index 06105c8..46fd6e3 100644
--- a/src/services/model/baseModel.d.ts
+++ b/src/services/model/baseModel.d.ts
@@ -1,4 +1,4 @@
-declare interface API<T> {
+declare interface API<T = any> {
   code: number;
   data?: T;
   message: string;
diff --git a/src/services/model/userModel.d.ts b/src/services/model/userModel.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/settings/encryptionSetting.ts b/src/settings/encryptionSetting.ts
index 22dd24e..876294d 100644
--- a/src/settings/encryptionSetting.ts
+++ b/src/settings/encryptionSetting.ts
@@ -1,9 +1,11 @@
-import { getPkgVersion, isDevMode } from '@/utils/env';
+import { getEnvValue, getPkgVersion, isDevMode } from '@/utils/env';
 
 // System default cache time, in seconds
 export const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
 const PREFIX =
-  import.meta.env.VITE_APP_CACHE_PREFIX || import.meta.env.VITE_APP_TITLE || 'UNI_APP_VUE3_TS';
+  getEnvValue<string>('VITE_APP_CACHE_PREFIX') ||
+  getEnvValue<string>('VITE_APP_TITLE') ||
+  'UNI_APP_VUE3_TS';
 export const DEFAULT_PREFIX_KEY = `${PREFIX}${getPkgVersion()}`;
 
 // aes encryption key
diff --git a/src/state/modules/auth.ts b/src/state/modules/auth.ts
new file mode 100644
index 0000000..c8e9db4
--- /dev/null
+++ b/src/state/modules/auth.ts
@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia';
+import { getCache, removeCache, setCache } from '@/utils/catch';
+import { TOKEN_KEY } from '@/enums/cacheEnum';
+import { login } from '@/services/api/auth';
+import { logout, refreshToken } from '@/services/api/auth';
+
+interface AuthState {
+  token?: string;
+}
+
+export const useAuthStore = defineStore({
+  id: 'auth',
+  state: (): AuthState => ({
+    token: undefined,
+  }),
+  getters: {
+    getToken: (state) => {
+      return state.token;
+    },
+    isLogin: (state): boolean => {
+      return !!state.token;
+    },
+  },
+  actions: {
+    initToken() {
+      this.token = getCache<string>(TOKEN_KEY) || undefined;
+    },
+    setToken(token: string | undefined) {
+      setCache(TOKEN_KEY, token);
+      this.token = token;
+    },
+    /**
+     * @description 登录
+     */
+    async login(params: LoginParams): Promise<LoginModel> {
+      try {
+        const { data } = await login(params);
+        this.setToken(data.token);
+        return Promise.resolve(data);
+      } catch (err: any) {
+        return Promise.reject(err);
+      }
+    },
+    /**
+     * @description 登出
+     */
+    async loginOut(): Promise<any> {
+      try {
+        const res = await logout();
+        removeCache(TOKEN_KEY);
+        this.setToken(undefined);
+        return Promise.resolve(res);
+      } catch (err: any) {
+        return Promise.reject(err);
+      }
+    },
+    /**
+     * @description 刷新token
+     */
+    async refreshToken(): Promise<LoginModel> {
+      try {
+        const { data } = await refreshToken();
+        this.setToken(data.token);
+        return Promise.resolve(data);
+      } catch (err: any) {
+        return Promise.reject(err);
+      }
+    },
+  },
+});
diff --git a/src/state/modules/user.ts b/src/state/modules/user.ts
index 0f451c0..3cf22f3 100644
--- a/src/state/modules/user.ts
+++ b/src/state/modules/user.ts
@@ -3,34 +3,11 @@ import { getCache, setCache } from '@/utils/catch';
 import { TOKEN_KEY } from '@/enums/cacheEnum';
 import { login } from '@/services/api/user';
 
-interface UserState {
-  token?: string;
-}
+interface UserState {}
 
 export const useUserStore = defineStore({
   id: 'user',
-  state: (): UserState => ({
-    token: undefined,
-  }),
-  getters: {
-    getToken: (state) => state.token || getCache<string>(TOKEN_KEY),
-  },
-  actions: {
-    setToken(token: string) {
-      setCache(TOKEN_KEY, token);
-      this.token = token;
-    },
-    /**
-     * @description 登录
-     */
-    async login(params: LoginParams): Promise<LoginModel> {
-      try {
-        const { data } = await login(params);
-        this.setToken(data.token);
-        return Promise.resolve(data);
-      } catch (err: any) {
-        return Promise.reject(err);
-      }
-    },
-  },
+  state: (): UserState => ({}),
+  getters: {},
+  actions: {},
 });
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..1d09c9c
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,4 @@
+import { getCache } from '@/utils/catch';
+import { TOKEN_KEY } from '@/enums/cacheEnum';
+
+export const TOKEN = () => getCache<string>(TOKEN_KEY) || undefined;
diff --git a/src/utils/env.ts b/src/utils/env.ts
index 14f7946..c37881b 100644
--- a/src/utils/env.ts
+++ b/src/utils/env.ts
@@ -15,13 +15,23 @@ export const devMode = 'development';
  */
 export const prodMode = 'production';
 
+/**
+ * @description: Get environment mode
+ * @returns:
+ * @example:
+ */
+export function getEnvMode(): string {
+  return isDevMode() ? devMode : prodMode;
+}
+
 /**
  * @description: Get environment variables
  * @returns:
  * @example:
  */
-export function getEnv(): string {
-  return isDevMode() ? devMode : prodMode;
+export function getEnvValue<T = any>(key: string): T {
+  // @ts-ignore
+  return import.meta.env[key];
 }
 
 /**
@@ -30,7 +40,7 @@ export function getEnv(): string {
  * @example:
  */
 export function isDevMode(): boolean {
-  return import.meta.env.VITE_DEV;
+  return getEnvValue<boolean>('VITE_DEV');
 }
 
 /**
@@ -39,5 +49,5 @@ export function isDevMode(): boolean {
  * @example:
  */
 export function isProdMode(): boolean {
-  return import.meta.env.VITE_PROD;
+  return getEnvValue<boolean>('VITE_PROD');
 }
diff --git a/src/utils/http/core/Request.ts b/src/utils/http/core/Request.ts
index 9f91562..e934df9 100644
--- a/src/utils/http/core/Request.ts
+++ b/src/utils/http/core/Request.ts
@@ -94,11 +94,11 @@ export default class Request {
    * @prop {Object} [options.method = config.method] - 请求方法
    * @returns {Promise<unknown>}
    */
-  request<T>(config = {}) {
+  request<T>(config: Partial<HttpRequestConfig> = {}) {
     return this.middleware<T>(config);
   }
 
-  get<T>(url: string, options = {}) {
+  get<T>(url: string, options: Partial<HttpRequestConfig> = {}) {
     return this.middleware<T>({
       url,
       method: 'GET',
diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts
index 53afc20..0f0d36d 100644
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
@@ -5,8 +5,10 @@ import { assign } from 'lodash-es';
 import { error } from '@/utils/log';
 import { HttpSuccess } from '@/types/http';
 import { Toast } from '@/utils/uniApi';
+import { getEnvValue } from '@/utils/env';
+import { useAuthStore } from '@/state/modules/auth';
 
-const BASE_URL = import.meta.env.VITE_BASE_URL;
+const BASE_URL = getEnvValue<string>('VITE_BASE_URL');
 const HEADER = {
   'Content-Type': 'application/json;charset=UTF-8;',
   Accept: 'application/json, text/plain, */*',
@@ -33,12 +35,14 @@ request.interceptors.request.use(
     const { config } = options;
     const token = TOKEN();
     if (config.custom?.auth) {
-      if (!token) {
+      const authStore = useAuthStore();
+      if (!authStore.isLogin) {
+        Toast('请先登录');
         // token不存在跳转到登录页
-        // return Promise.reject(options);
+        return Promise.reject(options);
       }
       config.header = assign(config.header, {
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${authStore.getToken}`,
       });
     }
     return options;
diff --git a/src/utils/log.ts b/src/utils/log.ts
index 2b97943..944d9b0 100644
--- a/src/utils/log.ts
+++ b/src/utils/log.ts
@@ -1,4 +1,6 @@
-const projectName = import.meta.env.VITE_APP_TITLE;
+import { getEnvValue } from '@/utils/env';
+
+const projectName = getEnvValue<string>('VITE_APP_TITLE');
 
 export function warn(message: string) {
   console.warn(`[${projectName} warn]:${message}`);