feat: 用户登录信息

.env.development

@@ -14,13 +14,13 @@ VITE_API_PREFIX_PATH = /dev-api
 VITE_MOCK_API_PREFIX_PATH = /mock-api
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 默认打开浏览器开关
 VITE_OPEN = false
 
 # 开发环境跨域代理，支持配置多个
-VITE_PROXY = [["/dev-api","http://localhost:8080"]]
+VITE_PROXY = [["/dev-api","http://localhost:9040"]]
 
 # 路由模式
 # Optional: hash | history

.env.production

@@ -11,7 +11,7 @@ VITE_API_PREFIX_PATH = /pro-api
 VITE_MOCK_API_PREFIX_PATH = /mock-api
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 路由模式
 # Optional: hash | history

src/api/interface/login.ts

@@ -1,3 +1,5 @@
+import { UserInfo } from './system/user'
+
 /**
  * 验证码返回
  */
@@ -10,24 +12,19 @@ export interface VerifyCodeResult {
 /**
  * 登录返回
  */
-export interface LoginResult {
-  access_token: string
+export interface LoginResult extends UserInfo {
+  accessToken: string
   tokenType: string
+  expireIn: number
 }
 
 /**
  * 登录请求
  */
 export interface LoginData {
-  // tenantId?: number | string
-  userName: string
+  account: string
   password: string
-  // rememberMe?: boolean
-  // socialCode?: string
-  // socialState?: string
-  // source?: string
-  code?: string
-  // uuid?: string
-  // clientId: string
-  // grantType: string
+  clientId: string
+  grantType: string
+  tenantId: string
 }

src/api/interface/system/user.ts

@@ -3,8 +3,8 @@
  */
 export interface UserInfo {
   user: UserVO
-  roles: string[]
-  permissions: string[]
+  permissionCodes: string[]
+  roleCodes: string[]
 }
 
 /**

src/api/module/system/menu.ts

@@ -1,8 +1,7 @@
 import http from '@/axios'
-import { RouteRecordRaw } from 'vue-router'
 class MenuApi {
-  static getRouters = (): Promise<ResultData<any>> => {
-    return http.get<RouteRecordRaw[]>({ url: '/system/menu/getRouters' })
+  static getMenuList = (): Promise<ResultData<any>> => {
+    return http.get<Menu.MenuOptions[]>({ url: '/system/menu/getRouters' })
   }
 }
 export default MenuApi

src/api/module/system/user.ts

@@ -3,7 +3,7 @@ import { UserInfo } from '@/api/interface/system/user'
 
 class UserApi {
   static getInfo = (): Promise<ResultData<any>> => {
-    return http.get<UserInfo[]>({ url: '/system/user/getInfo' })
+    return http.get<UserInfo[]>({ url: '/system/user/info' })
   }
 }
 export default UserApi

src/axios/service.ts

@@ -14,7 +14,7 @@ interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
   interceptors?: RequestInterceptors<T>
 }
 
-export const BASE_URL = import.meta.env.VITE_USE_MOCK ? import.meta.env.VITE_MOCK_API_PREFIX_PATH : import.meta.env.VITE_API_PREFIX_PATH
+export const BASE_URL = import.meta.env.VITE_API_PREFIX_PATH
 
 const abortControllerMap: Map<string, AbortController> = new Map()
 

src/enums/MenuTypeEnum.ts

@@ -0,0 +1,15 @@
+export enum MenuTypeEnum {
+  /**
+   * 目录
+   */
+  M = 'M',
+  /**
+   * 菜单
+   */
+  C = 'C',
+
+  /**
+   * 按钮
+   */
+  F = 'F'
+}

src/stores/interface/index.ts

@@ -1,9 +1,9 @@
 /* AuthState */
 export interface AuthState {
   isLoaded: boolean
-  authButtonList: string[]
-  authRoleList: string[]
-  authMenuList: Menu.MenuOptions[]
+  permissionCodes: string[]
+  roleCodes: string[]
+  menuList: Menu.MenuOptions[]
   routeName: string
 }
 
@@ -17,13 +17,19 @@ export interface AppState {
 /* UserState */
 export interface UserState {
   token: string | undefined
-  name: string
-  avatar: string
+  expireIn: number
+  user: UserInfo
+  permissionCodes: string[]
+  roleCodes: string[]
+}
+
+export type UserInfo = {
+  userId?: number
+  account: string
+  userName: string
+  orgId: string
   nickname: string
-  userId: string | number
-  tenantId: string
-  roles: string[]
-  permissions: string[]
+  userType: string
 }
 
 /* SettingState */

src/stores/modules/auth.ts

@@ -2,45 +2,50 @@ import { type AuthState } from '@/stores/interface'
 import { type RouteRecordRaw } from 'vue-router'
 import { pinia } from '../index'
 import { getAllBreadcrumbList, getFlatMenuList, getShowMenuList } from '@/utils'
+import MenuApi from '@/api/module/system/menu'
 const modules = import.meta.glob('../../views/**/**.vue')
 const Layout = () => import('@/layouts/index.vue')
 
 export const useAuthStore = defineStore('eco-auth', {
   state: (): AuthState => ({
     isLoaded: false,
-    authButtonList: [],
-    authMenuList: [],
-    authRoleList: [],
+    permissionCodes: [],
+    menuList: [],
+    roleCodes: [],
     routeName: ''
   }),
   getters: {
     getLoaded: state => state.isLoaded,
-    getAuthButtonList: state => state.authButtonList,
-    getAuthMenuList: state => state.authMenuList,
-    getAuthRoleList: state => state.authRoleList,
+    getPermissionCodes: state => state.permissionCodes,
+    getMenuList: state => state.menuList,
+    getRoleCodes: state => state.roleCodes,
     getRouteName: state => state.routeName,
     showMenuListGet: state => {
-      getShowMenuList(state.authMenuList)
+      getShowMenuList(state.menuList)
     },
     flatMenuListGet: state => {
-      return getFlatMenuList(state.authMenuList)
+      return getFlatMenuList(state.menuList)
     },
     breadcrumbListGet: state => {
-      return getAllBreadcrumbList(state.authMenuList)
+      return getAllBreadcrumbList(state.menuList)
     }
   },
   actions: {
     setLoaded() {
       this.isLoaded = true
     },
-    setAuthButtonList() {
+    setPermissionCodes(codes: string[]) {
       // 获取 按钮权限
+      this.permissionCodes = codes
     },
-    setAuthMenuList() {
-      // 获取 菜单权限
+    async setMenuList() {
+      // 获取 菜单权限 API获取
+      const { data } = await MenuApi.getMenuList()
+      this.menuList = data
     },
-    setAuthRoleList() {
+    setRoleCodes(codes: string[]) {
       // 获取 角色权限
+      this.roleCodes = codes
     },
     setRouteName(name: string) {
       // 获取 路由
@@ -48,9 +53,9 @@ export const useAuthStore = defineStore('eco-auth', {
     },
     clear() {
       this.isLoaded = false
-      this.authButtonList = []
-      this.authMenuList = []
-      this.authRoleList = []
+      this.permissionCodes = []
+      this.menuList = []
+      this.roleCodes = []
     }
   }
 })

src/stores/modules/user.ts

@@ -5,17 +5,20 @@ import UserApi from '@/api/module/system/user'
 import { type UserInfo } from '@/api/interface/system/user'
 import LoginApi from '@/api/module/login'
 import { pinia } from '../index'
-
 export const useUserStore = defineStore('eco-user', {
   state: (): UserState => ({
     token: getToken(),
-    name: '',
-    avatar: '',
-    nickname: '',
-    userId: '',
-    tenantId: '',
-    roles: [],
-    permissions: []
+    expireIn: 0,
+    user: {
+      userId: undefined,
+      account: '',
+      userName: '',
+      orgId: '',
+      nickname: '',
+      userType: ''
+    },
+    permissionCodes: [],
+    roleCodes: []
   }),
   getters: {},
   actions: {
@@ -24,9 +27,13 @@ export const useUserStore = defineStore('eco-user', {
         LoginApi.login(loginData)
           .then(({ code, data, msg }) => {
             if (code === 200) {
-              const { tokenType, accessToken } = data
-              setToken(tokenType + ' ' + accessToken)
-              this.token = tokenType + ' ' + accessToken
+              const { accessToken, user, roleCodes, permissionCodes, expireIn } = data
+              setToken(accessToken)
+              this.token = accessToken
+              this.user = user
+              this.roleCodes = roleCodes
+              this.permissionCodes = permissionCodes
+              this.expireIn = expireIn
               resolve({ code, msg })
             }
           })
@@ -41,8 +48,8 @@ export const useUserStore = defineStore('eco-user', {
           .then(({ code, msg }) => {
             if (code === 200) {
               this.token = ''
-              this.roles = []
-              this.permissions = []
+              this.roleCodes = []
+              this.permissionCodes = []
               removeToken()
               resolve({ code, msg })
             }
@@ -57,19 +64,18 @@ export const useUserStore = defineStore('eco-user', {
         UserApi.getInfo()
           .then(({ code, data }) => {
             if (code === 200) {
-              const { user, roles, permissions } = data
-              this.avatar = user.avatar
-              this.roles = roles
-              this.name = user.userName
-              this.permissions = permissions
+              const { user, roleCodes, permissionCodes } = data
+              this.user = user
+              this.roleCodes = roleCodes
+              this.permissionCodes = permissionCodes
               resolve(data)
             } else {
-              this.roles = []
+              this.roleCodes = []
               removeToken()
             }
           })
           .catch(error => {
-            this.roles = []
+            this.roleCodes = []
             removeToken()
             reject(error)
           })

src/views/login/index.vue

@@ -1,7 +1,81 @@
 <template>
-  <div>登录页面</div>
+  <div class="login-page">
+    <div class="login-container">
+      <div class="login-card">
+        <h2 class="login-title">卫星轨道仿真演示系统</h2>
+        <el-form ref="ruleFormRef" style="width: 400px" :model="loginForm" status-icon label-width="auto">
+          <el-form-item label="账号" prop="account">
+            <el-input v-model="loginForm.account" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="loginForm.password" type="password" autocomplete="off" />
+          </el-form-item>
+          <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
+          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+import { type FormInstance } from 'element-plus'
+import { useUserStore } from '@/stores'
+import router from '@/router'
+import { LocationQuery } from 'vue-router'
+const ruleFormRef = ref<FormInstance>()
+const route = useRoute()
+const userStore = useUserStore()
+const loginForm = reactive({
+  account: 'superadmin',
+  password: 'admin123',
+  grantType: 'password',
+  clientId: '7daa6e9b-8876-4918-8a12-b68cbfcdc680',
+  tenantId: '1'
+})
 
-<style scoped lang="scss"></style>
+/**
+ * 提交表单
+ *
+ * @param formEl 表单
+ */
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(valid => {
+    if (valid) {
+      userStore.userLogin({ ...loginForm }).then(res => {
+        if (res.code === 200) {
+          const { path, queryParams } = parseRedirect()
+          router.push({ path: path, query: queryParams })
+          // ElMessage.success('提交成功')
+        }
+      })
+    } else {
+    }
+  })
+}
+
+/**
+ * 重置表单
+ *
+ * @param formEl 表单
+ */
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+
+const parseRedirect = () => {
+  const query: LocationQuery = route.query
+  const redirect = (query.redirect as string) ?? '/home'
+  const url = new URL(redirect, window.location.origin)
+  const path = url.pathname
+  const queryParams: Record<string, string> = {}
+  url.searchParams.forEach((value, key) => {
+    queryParams[key] = value
+  })
+
+  return { path, queryParams }
+}
+</script>
+<style lang="scss"></style>