feat: login 接口对接

frontend/.env.development

@@ -1,2 +1,2 @@
-VITE_API_BASE_URL= 'http://192.168.200.10:8081'
+VITE_API_BASE_URL= 'front'
 VUE_APP_Access_Control_Allow_Origin= '*'

frontend/config/vite.config.dev.ts

@@ -12,9 +12,10 @@ export default mergeConfig(
         strict: true,
       },
       proxy: {
-        '/api': {
-          target: 'http://192.168.200.10:8081',
+        '/front': {
+          target: 'http://101.43.186.75:8081/',
           changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/front/, ''),
         },
       },
     },

frontend/src/api/http/index.ts

@@ -162,6 +162,8 @@ const transform: AxiosTransform = {
   },
 };
 
+const { sessionId, csrfToken } = getToken();
+
 function createAxios(opt?: Partial<CreateAxiosOptions>) {
   return new MSAxios(
     deepMerge(
@@ -170,9 +172,9 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // authentication schemes，e.g: Bearer
         // authenticationScheme: 'Bearer',
         authenticationScheme: '',
+        baseURL: import.meta.env.VITE_API_BASE_URL as string,
         timeout: 30 * 1000,
-
-        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        headers: { 'Content-Type': ContentTypeEnum.JSON, 'X-AUTH-TOKEN': sessionId, 'CSRF-TOKEN': csrfToken },
         // 如果是form-data格式
         // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
         // 数据处理方式

frontend/src/api/requrls/api-test.ts

@@ -1,2 +1,2 @@
-export const GetApiTestListUrl = '/mock/list/menu';
-export const GetApiTestList = '/api/definition/page';
+export const GetApiTestListUrl = `/mock/list/menu`;
+export const GetApiTestList = `/api/definition/page`;

frontend/src/api/requrls/user.ts

@@ -1,4 +1,4 @@
-export const LoginUrl = '/api/user/login';
+export const LoginUrl = '/login';
 export const LogoutUrl = '/api/user/logout';
 export const GetUserInfoUrl = '/api/user/info';
 export const GetMenuListUrl = '/api/user/menu';

frontend/src/components/ms-table/useTable.ts

@@ -1,7 +1,7 @@
 // 核心的封装方法，详细参数看文档  https://arco.design/vue/component/table
 // hook/table-props.ts
 
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
 import { MsTabelProps, MsTableData, MsTableColumn } from './type';
 import { ApiTestListI } from '@/models/api-test';
 
@@ -20,10 +20,18 @@ export interface QueryParams {
 
 type GetListFunc = (v: QueryParams) => Promise<ApiTestListI>;
 export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
+  // 行选择
+  const rowSelection = reactive({
+    type: 'checkbox',
+    showCheckedAll: true,
+    onlyCurrent: false,
+  });
+
   const defaultProps: MsTabelProps = {
     'bordered': true,
-    'size': 'mini',
-    'scroll': { y: 550, x: '1400px' },
+    'size': 'small',
+    'scroll': { y: '550px', x: '1400px' },
+    'checkable': true,
     'expandable': false,
     'loading': true,
     'data': [] as MsTableData,
@@ -42,6 +50,11 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<
   // 属性组
   const propsRes = ref(defaultProps);
 
+  // 是否可选中
+  if (propsRes.value.selectable) {
+    propsRes.value['row-selection'] = rowSelection;
+  }
+
   // 加载效果
   const setLoading = (status: boolean) => {
     propsRes.value.loading = status;

frontend/src/models/user.ts

@@ -2,9 +2,11 @@
 export interface LoginData {
   username: string;
   password: string;
+  authenticate: string;
 }
 
 // 登录返回
 export interface LoginRes {
-  token: string;
+  sessionId: string;
+  csrfToken: string;
 }

frontend/src/store/modules/user/index.ts

@@ -61,7 +61,7 @@ const useUserStore = defineStore('user', {
     async login(loginForm: LoginData) {
       try {
         const res = await userLogin(loginForm);
-        setToken(res.token);
+        setToken(res.sessionId, res.csrfToken);
       } catch (err) {
         clearToken();
         throw err;

frontend/src/utils/auth.ts

@@ -1,19 +1,22 @@
-const TOKEN_KEY = 'token';
+const SESSION_ID = 'sessionId';
+const CSRF_TOKEN = 'csrfToken';
 
 const isLogin = () => {
-  return !!localStorage.getItem(TOKEN_KEY);
+  return !!localStorage.getItem(SESSION_ID);
 };
-
+// 获取token
 const getToken = () => {
-  return localStorage.getItem(TOKEN_KEY);
+  return { [SESSION_ID]: localStorage.getItem(SESSION_ID), [CSRF_TOKEN]: localStorage.getItem(CSRF_TOKEN) || '' };
 };
 
-const setToken = (token: string) => {
-  localStorage.setItem(TOKEN_KEY, token);
+const setToken = (sessionId: string, csrfToken: string) => {
+  localStorage.setItem(SESSION_ID, sessionId);
+  localStorage.setItem(CSRF_TOKEN, csrfToken);
 };
 
 const clearToken = () => {
-  localStorage.removeItem(TOKEN_KEY);
+  localStorage.removeItem(SESSION_ID);
+  localStorage.removeItem(CSRF_TOKEN);
 };
 
 export { isLogin, getToken, setToken, clearToken };

frontend/src/views/api-test/index.vue

@@ -26,6 +26,7 @@
     {
       title: '接口名称',
       dataIndex: 'name',
+      width: 200,
     },
     {
       title: '请求类型',
@@ -66,6 +67,7 @@
     {
       title: '创建时间',
       slotName: 'createTime',
+      width: 200,
     },
     {
       title: '描述',
@@ -79,7 +81,7 @@
     },
   ];
 
-  const { propsRes, propsEvent, loadList } = useTable(getTableList, { columns, scroll: { x: 2000 } });
+  const { propsRes, propsEvent, loadList } = useTable(getTableList, { columns, scroll: { y: 750, x: 2000 } });
 
   const fetchData = async () => {
     await loadList();

frontend/src/views/login/components/login-form.vue

@@ -11,9 +11,9 @@
     <div class="form mt-20">
       <a-form ref="formRef" :model="userInfo" @submit="handleSubmit">
         <a-form-item field="radio" hide-label>
-          <a-radio-group v-model="userInfo.radio">
+          <a-radio-group v-model="userInfo.authenticate">
             <a-radio value="LDAP">LDAP</a-radio>
-            <a-radio value="normal">普通登陆</a-radio>
+            <a-radio value="LOCAL">普通登陆</a-radio>
             <a-radio value="OIDC 90">OIDC 90</a-radio>
           </a-radio-group>
         </a-form-item>
@@ -23,7 +23,11 @@
           :validate-trigger="['change', 'blur']"
           hide-label
         >
-          <a-input v-model="userInfo.username" :placeholder="$t('login.form.userName.placeholder')" class="rounded-3xl">
+          <a-input
+            v-model="userInfo.username"
+            :placeholder="$t('login.form.userName.placeholder')"
+            style="border-radius: 1.5rem"
+          >
             <template #prefix>
               <icon-user />
             </template>
@@ -39,7 +43,7 @@
             v-model="userInfo.password"
             :placeholder="$t('login.form.password.placeholder')"
             allow-clear
-            class="rounded-3xl"
+            style="border-radius: 1.5rem"
           >
             <template #prefix>
               <icon-lock />
@@ -47,7 +51,7 @@
           </a-input-password>
         </a-form-item>
         <div class="mt-4">
-          <a-button class="rounded-3xl" type="primary" html-type="submit" long :loading="loading">
+          <a-button style="border-radius: 1.5rem" type="primary" html-type="submit" long :loading="loading">
             {{ $t('login.form.login') }}
           </a-button>
         </div>
@@ -75,14 +79,14 @@
 
   const loginConfig = useStorage('login-config', {
     rememberPassword: true,
-    username: 'admin', // 演示默认值
-    password: 'admin', // demo default value
+    username: 'admin',
+    password: 'metersphere',
   });
 
   const userInfo = reactive({
-    radio: 'normal',
-    username: '',
-    password: '',
+    authenticate: 'LOCAL',
+    username: 'admin',
+    password: 'metersphere',
   });
 
   const handleSubmit = async ({

frontend/src/views/login/locale/en-US.ts

@@ -4,8 +4,8 @@ export default {
   'login.form.password.errMsg': 'Password cannot be empty',
   'login.form.login.errMsg': 'Login error, refresh and try again',
   'login.form.login.success': 'welcome to use',
-  'login.form.userName.placeholder': 'Username: admin',
-  'login.form.password.placeholder': 'Password: admin',
+  'login.form.userName.placeholder': 'Username',
+  'login.form.password.placeholder': 'Password',
   'login.form.rememberPassword': 'Remember password',
   'login.form.forgetPassword': 'Forgot password',
   'login.form.login': 'login',

frontend/src/views/login/locale/zh-CN.ts

@@ -4,8 +4,8 @@ export default {
   'login.form.password.errMsg': '密码不能为空',
   'login.form.login.errMsg': '登录出错，请刷新重试',
   'login.form.login.success': '欢迎使用',
-  'login.form.userName.placeholder': '用户名：admin',
-  'login.form.password.placeholder': '密码：admin',
+  'login.form.userName.placeholder': '用户名',
+  'login.form.password.placeholder': '密码',
   'login.form.rememberPassword': '记住密码',
   'login.form.forgetPassword': '忘记密码',
   'login.form.login': '登录',