feat: 新增登录接口请求

.env

@@ -1,14 +1,8 @@
 # port
-VITE_DEV_PORT = '8001'
+VITE_DEV_PORT = '8080'
 
 # development path
-VITE_DEV_PATH = '/'
+VITE_DEV_PATH = 'http://124.70.187.180:8080'
 
 # production path
-VITE_PRO_PATH = '/'
-
-# spa-title
-VITE_GLOB_APP_TITLE = GoView
-
-# spa shortname
-VITE_GLOB_APP_SHORT_NAME = GoView
+VITE_PRO_PATH = 'http://124.70.187.180:8080'

build/getConfigFileName.ts

@@ -1,9 +0,0 @@
-/**
- * Get the configuration file variable name
- * @param env
- */
-export const getConfigFileName = (env: Record<string, any>) => {
-  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
-    .toUpperCase()
-    .replace(/\s/g, '');
-};

src/api/axios.ts

@@ -2,9 +2,16 @@ import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
 import { ResultEnum } from "@/enums/httpEnum"
 import { ErrorPageNameMap } from "@/enums/pageEnum"
 import { redirectErrorPage } from '@/utils'
+import { axiosPre } from '@/settings/httpSetting'
+
+interface MyResponseType {
+  code: number;
+  msg: string;
+  data: any;
+}
 
 const axiosInstance = axios.create({
-  baseURL: import.meta.env.DEV ? import.meta.env.VITE_DEV_PATH : import.meta.env.VITE_PRO_PATH,
+  baseURL: axiosPre,
   timeout: ResultEnum.TIMEOUT,
 })
 

src/enums/httpEnum.ts

@@ -1,6 +1,10 @@
-/**
- * @description: 请求结果集
- */
+// 模块 Path 前缀分类
+export enum ModuleTypeEnum {
+  SYSTEM = 'sys',
+  PROJECT = 'project',
+}
+
+// 请求结果集
 export enum ResultEnum {
   DATA_SUCCESS = 0,
   SUCCESS = 200,
@@ -18,9 +22,7 @@ export enum RequestDataTypeEnum {
   AJAX = 1,
 }
 
-/**
- * @description: 请求方法
- */
+// 请求方法
 export enum RequestHttpEnum {
   GET = 'get',
   POST = 'post',
@@ -29,9 +31,7 @@ export enum RequestHttpEnum {
   DELETE = 'delete',
 }
 
-/**
- * @description:  常用的contentTyp类型
- */
+// 常用的contentTyp类型
 export enum ContentTypeEnum {
   // json
   JSON = 'application/json;charset=UTF-8',

src/enums/storageEnum.ts

@@ -1,10 +1,8 @@
 export enum StorageEnum {
   // 全局设置
-  GO_SYSTEM_SETTING_STORE = 'GO_SYSTEM_SETTING',
-  // token 等信息
-  GO_ACCESS_TOKEN_STORE = 'GO_ACCESS_TOKEN',
+  GO_SETTING_STORE = 'GO_SETTING',
   // 登录信息
-  GO_LOGIN_INFO_STORE = 'GO_LOGIN_INFO',
+  GO_SYSTEM_STORE = 'GO_SYSTEM',
   // 语言
   GO_LANG_STORE = 'GO_LANG',
   // 当前选择的主题

src/settings/httpSetting.ts

@@ -0,0 +1,2 @@
+// 请求前缀
+export const axiosPre = '/goview/api/goview/'

src/store/modules/settingStore/settingStore.ts

@@ -4,10 +4,10 @@ import { asideCollapsedWidth } from '@/settings/designSetting'
 import { SettingStoreType, ToolsStatusEnum } from './settingStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
-const { GO_SYSTEM_SETTING_STORE } = StorageEnum
+const { GO_SETTING_STORE } = StorageEnum
 
 const storageSetting: SettingStoreType = getLocalStorage(
-  GO_SYSTEM_SETTING_STORE
+  GO_SETTING_STORE
 )
 
 // 全局设置
@@ -45,7 +45,7 @@ export const useSettingStore = defineStore({
       this.$patch(state => {
         state[key] = value
       })
-      setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
+      setLocalStorage(GO_SETTING_STORE, this.$state)
     }
   }
 })

src/store/modules/systemStore/systemStore.d.ts

@@ -0,0 +1,19 @@
+export enum SystemStoreUserInfoEnum {
+  USER_TOKEN = 'userToken',
+  USER_ID = 'userId',
+  USER_NAME = 'userName',
+}
+
+export interface UserInfoType {
+  [SystemStoreUserInfoEnum.USER_TOKEN]?: string,
+  [SystemStoreUserInfoEnum.USER_ID]?: string,
+  [SystemStoreUserInfoEnum.USER_NAME]?: string,
+}
+
+export enum SystemStoreEnum {
+  USER_INFO = 'userInfo'
+}
+
+export interface SystemStoreType {
+  [SystemStoreEnum.USER_INFO]: UserInfoType
+}

src/store/modules/systemStore/systemStore.ts

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import { SystemStoreType, SystemStoreEnum } from './systemStore.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+const { GO_SYSTEM_STORE } = StorageEnum
+
+const storageSystem: SystemStoreType = getLocalStorage(GO_SYSTEM_STORE)
+
+// 系统数据记录
+export const useSystemStore = defineStore({
+  id: 'useSystemStore',
+  state: (): SystemStoreType => storageSystem || {
+    userInfo: {
+      userId: undefined,
+      userName: undefined,
+      userToken: undefined
+    }
+  },
+  getters: {},
+  actions: {
+    setItem<T extends keyof SystemStoreType, K extends SystemStoreType[T]>(key: T, value: K): void {
+      this.$patch(state => {
+        state[key]= value
+      });
+      setLocalStorage(GO_SYSTEM_STORE, this.$state)
+    }
+  }
+})

src/utils/http.ts

@@ -0,0 +1,6 @@
+/**
+ * * 请求失败统一处理
+ */
+export const httpErrorHandle = () => {
+  window['$message'].error('请求失败，请稍后重试！')
+}

src/utils/index.ts

@@ -7,3 +7,4 @@ export * from '@/utils/plugin'
 export * from '@/utils/componets'
 export * from '@/utils/type'
 export * from '@/utils/file'
+export * from '@/utils/http'

src/utils/router.ts

@@ -2,7 +2,7 @@ import { useRoute } from 'vue-router'
 import { ResultEnum } from '@/enums/httpEnum'
 import { ErrorPageNameMap, PageEnum } from '@/enums/pageEnum'
 import { docPath, giteeSourceCodePath } from '@/settings/pathConst'
-import { cryptoDecode } from './crypto'
+import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
 import { StorageEnum } from '@/enums/storageEnum'
 import { clearLocalStorage, getLocalStorage } from './storage'
 import router from '@/router'
@@ -104,7 +104,7 @@ export const reloadRoutePage = () => {
  * * 退出
  */
 export const logout = () => {
-  clearLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
+  clearLocalStorage(StorageEnum.GO_SYSTEM_STORE)
   routerTurnByName(PageEnum.BASE_LOGIN_NAME)
 }
 
@@ -167,10 +167,9 @@ export const goHome = () => {
  */
 export const loginCheck = () => {
   try {
-    const info = getLocalStorage(StorageEnum.GO_LOGIN_INFO_STORE)
+    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
     if (!info) return false
-    const decodeInfo = cryptoDecode(info)
-    if (decodeInfo) {
+    if (info[SystemStoreEnum.USER_INFO][SystemStoreUserInfoEnum.USER_TOKEN]) {
       return true
     }
     return false

src/views/login/api/index.ts

@@ -0,0 +1,13 @@
+import { http } from '@/api/http'
+import { httpErrorHandle } from '@/utils'
+import { RequestHttpEnum, ModuleTypeEnum } from '@/enums/httpEnum'
+
+// 登录
+export const loginRequest = async (data: object) => {
+  try {
+    const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.SYSTEM}/login`, data);
+    return res;
+  } catch {
+    httpErrorHandle();
+  }
+}

src/views/login/index.vue

@@ -118,7 +118,8 @@
 import { reactive, ref, onMounted } from 'vue'
 import shuffle from 'lodash/shuffle'
 import { carouselInterval } from '@/settings/designSetting'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useSystemStore } from '@/store/modules/systemStore/systemStore'
+import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
 import { GoThemeSelect } from '@/components/GoThemeSelect'
 import { GoLangSelect } from '@/components/GoLangSelect'
 import { LayoutHeader } from '@/layout/components/LayoutHeader'
@@ -126,22 +127,23 @@ import { LayoutFooter } from '@/layout/components/LayoutFooter'
 import { PageEnum } from '@/enums/pageEnum'
 import { icon } from '@/plugins'
 import { StorageEnum } from '@/enums/storageEnum'
-import { routerTurnByName, cryptoEncode, setLocalStorage } from '@/utils'
-const { GO_LOGIN_INFO_STORE } = StorageEnum
-
-const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
+import { routerTurnByName } from '@/utils'
+import { loginRequest } from './api/index'
 
 interface FormState {
   username: string
   password: string
 }
 
+const { GO_SYSTEM_STORE } = StorageEnum
+const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
+
 const formRef = ref()
 const loading = ref(false)
 const autoLogin = ref(true)
 const show = ref(false)
 const showBg = ref(false)
-const designStore = useDesignStore()
+const systemStore = useSystemStore()
 
 const t = window['$t']
 
@@ -156,7 +158,7 @@ onMounted(() => {
 
 const formInline = reactive({
   username: 'admin',
-  password: '123456',
+  password: 'admin',
 })
 
 const rules = {
@@ -203,24 +205,28 @@ const shuffleHandle = () => {
   }, carouselInterval)
 }
 
-// 点击事件
-const handleSubmit = (e: Event) => {
+// 登录
+const handleSubmit = async (e: Event) => {
   e.preventDefault()
   formRef.value.validate(async (errors: any) => {
     if (!errors) {
       const { username, password } = formInline
       loading.value = true
-      setLocalStorage(
-        GO_LOGIN_INFO_STORE,
-        cryptoEncode(
-          JSON.stringify({
-            username,
-            password,
-          })
-        )
-      )
-      window['$message'].success(`${t('login.login_success')}!`)
-      routerTurnByName(PageEnum.BASE_HOME_NAME, true)
+      // 提交请求
+      const res:any = await loginRequest({
+        username,
+        password
+      })
+      if(res.data) {
+        const { tokenValue, loginId } = res.data
+        systemStore.setItem(SystemStoreEnum.USER_INFO, {
+          userToken: tokenValue,
+          userId: loginId,
+          userName: username,
+        })
+        window['$message'].success(`${t('login.login_success')}!`)
+        routerTurnByName(PageEnum.BASE_HOME_NAME, true)
+      }
     } else {
       window['$message'].error(`${t('login.login_message')}!`)
     }

types/vite-env.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  // 标题
-  VITE_GLOB_APP_TITLE: string;
   // 端口
   VITE_DEV_PORT: string;
   // 开发地址

vite.config.ts

@@ -1,16 +1,17 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 import { OUTPUT_DIR, brotliSize, chunkSizeWarningLimit, terserOptions, rollupOptions } from './build/constant'
 import viteCompression from 'vite-plugin-compression'
 import { viteMockServe} from "vite-plugin-mock";
+import { axiosPre } from './src/settings/httpSetting'
 
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir)
 }
 
-export default defineConfig({
-  base: './',
+export default ({ mode }) => defineConfig({
+  base: process.env.NODE_ENV === 'production' ? './' : '/',
   // 路径重定向
   resolve: {
     alias: [
@@ -34,6 +35,21 @@ export default defineConfig({
       }
     }
   },
+  // 开发服务器配置
+  server: {
+    host: true,
+    open: true,
+    port: 3000,
+    proxy: {
+      [axiosPre]: {
+        // @ts-ignore
+        target: loadEnv(mode, process.cwd()).VITE_DEV_PATH,
+        changeOrigin: true,
+        ws: true,
+        secure: true,
+      }
+    }
+  },
   plugins: [
     vue(),
     viteMockServe({