添加密码登录功能

src/api/user.ts

@@ -0,0 +1,22 @@
+import request from '@/utils/request';
+
+/**
+ * 用户登录
+ * @param prams 登录参数
+ */
+export const userLogin = (params: any) => {
+  return request.post('/api-oauth/userlogin', {
+    requestType: 'form',
+    data: params
+  });
+};
+
+/**
+ * 获取用户信息
+ * returns user
+ */
+export const getUserInfo = () => {
+  return request.get('/api-app/user/getUserInfo', {
+    requestType: 'form'
+  });
+};

src/components/layout/index.tsx

@@ -16,7 +16,6 @@ export default defineComponent({
     const showModalTone = ref(false);
     const showModalTime = ref(false);
     const initMoveable = async () => {
-      console.log(document.querySelector('.wrap'));
       if (document.querySelector('.wrap')) {
         const moveable = new Moveable(document.querySelector('.wrap') as any, {
           target: document.querySelector('#moveNPopover') as any,

src/main.ts

@@ -6,7 +6,6 @@ import { setupNaive } from './plugins';
 import { setupStore } from './store';
 import 'dayjs/locale/zh-cn';
 import './styles/index.less';
-import { useLoadingBar } from 'naive-ui';
 
 async function setupApp() {
   // app loading
@@ -25,7 +24,7 @@ async function setupApp() {
 
   dayjs.locale('zh-ch');
 
-  app.use(router);
+  // app.use(router);
 
   await router.isReady();
 

src/store/modules/users.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia';
+import { store } from '@/store';
 import { ACCESS_TOKEN, CURRENT_USER, IM_TOKEN } from '@/store/mutation-types';
 import { storage } from '@/utils/storage';
+import { userLogin, getUserInfo } from '@/api/user';
 
 export interface IUserState {
   token: string;
@@ -51,30 +53,25 @@ export const useUserStore = defineStore('user-store', {
     // 登录
     async login(userInfo: any) {
       try {
-        if (userInfo.username !== 'admin' || userInfo.password !== '123456') {
-          return Promise.reject({ msg: '用户名或密码错误' });
-        }
-        // const response = (await login(userInfo)) as any;
-        // const { data, code } = response;
-        // if (code === ResultEnum.SUCCESS) {
+        const { data } = await userLogin(userInfo);
         const ex = 7 * 24 * 60 * 60 * 1000;
-        storage.set(ACCESS_TOKEN, 'bearer test1121121212121212', ex);
+        storage.set(
+          ACCESS_TOKEN,
+          data.token_type + ' ' + data.access_token,
+          ex
+        );
+        storage.get(IM_TOKEN, data.imToken);
         storage.set(
           CURRENT_USER,
           {
-            name: '王天奇',
-            avatar: ''
+            userId: data.userId
           },
           ex
         );
-        //   this.setToken(data.token_type + ' ' + data.access_token);
-        //   this.setImToken(data.imToken);
-        //   this.setUserInfo(data);
-        // }
-        this.setToken('bearer test1121121212121212');
+        this.setToken(data.token_type + ' ' + data.access_token);
+        this.setImToken(data.imToken);
         this.setUserInfo({
-          name: '王天奇',
-          avatar: ''
+          userId: data.userId
         });
         return Promise.resolve();
       } catch (e) {
@@ -83,10 +80,9 @@ export const useUserStore = defineStore('user-store', {
     },
 
     // 获取用户信息
-    getInfo() {
+    async getInfo() {
       // const that = this;
       return new Promise((resolve, reject) => {
-        // getUserInfo()
         //   .then(res => {
         //     const result = res.data;
         //     this..setUserInfo(result);
@@ -97,6 +93,9 @@ export const useUserStore = defineStore('user-store', {
         //     reject(error);
         //   });
         try {
+          // getUserInfo().then((res: any) => {
+          //   console.log(res, 'res');
+          // });
           resolve(true);
         } catch {
           reject();
@@ -108,12 +107,13 @@ export const useUserStore = defineStore('user-store', {
     async logout() {
       this.setUserInfo('');
       storage.remove(ACCESS_TOKEN);
+      storage.remove(CURRENT_USER);
       return Promise.resolve('');
     }
   }
 });
 
 // Need to be used outside the setup
-// export function useUserStoreWidthOut() {
-//   return useUserStore(store);
-// }
+export function useUserStoreWidthOut() {
+  return useUserStore(store);
+}

src/types.d.ts

@@ -3,5 +3,6 @@ export {};
 declare global {
   interface Window {
     $loadingBar: any;
+    $message: any;
   }
 }

src/utils/request.ts

@@ -0,0 +1,90 @@
+import { extend } from 'umi-request';
+import cleanDeep from 'clean-deep';
+import { useUserStore } from '../store/modules/users';
+import router from '@/router';
+
+export interface SearchInitParams {
+  rows?: string | number;
+  page?: string | number;
+}
+
+const request = extend({
+  // requestType: 'form',
+  hideLoading: true, // 默认都不显示加载
+  timeout: 20000,
+  timeoutMessage: '请求超时'
+});
+
+request.interceptors.request.use(
+  (url, options: any) => {
+    if (!options.hideLoading) {
+      window.$message.loading('加载中...');
+    }
+
+    const userStore = useUserStore();
+    const Authorization = userStore.getToken || '';
+    const authHeaders: any = {};
+    if (
+      Authorization &&
+      !['/api-oauth/userlogin', '/api-auth/open/sendSms'].includes(url)
+    ) {
+      authHeaders.Authorization = Authorization;
+    }
+
+    return {
+      url,
+      options: {
+        ...options,
+        params: cleanDeep(options.params),
+        data: cleanDeep(options.data),
+        headers: {
+          ...options.headers,
+          ...authHeaders
+        }
+      }
+    };
+  },
+  { global: false }
+);
+
+request.interceptors.response.use(
+  async (res: any) => {
+    const userStore = useUserStore();
+    if (res.status > 299 || res.status < 200) {
+      const msg = '服务器错误，状态码' + res.status;
+      window.$message.error(msg);
+      throw new Error(msg);
+    }
+    const data = await res.clone().json();
+    if (
+      data.code === 401 ||
+      data.code === 4001 ||
+      data.code == 403 ||
+      data.code == 5000
+    ) {
+      console.log(res, 'res');
+      userStore.logout(); // 删除登录 - 清除缓存
+      router.replace('/login');
+      location.reload();
+      return;
+    }
+    if (
+      (((data.code < 200 && data.code != 100) ||
+        (data.code >= 300 && data.code != 100)) &&
+        data.code != 0 &&
+        data.code == 5200) ||
+      data.code == 5400 ||
+      (data.code >= 5000 && data.code < 6000) ||
+      data.code == -1
+    ) {
+      const str = res.message || `请求失败code码为${data.code}`;
+      window.$message.error(str);
+      throw new Error(str);
+    }
+
+    return res;
+  },
+  { global: false }
+);
+
+export default request;

src/views/login/components/pwdLogin.tsx

@@ -28,7 +28,7 @@ interface FormState {
 
 export default defineComponent({
   name: 'codeLogin',
-  setup(props, { emit }) {
+  setup() {
     const router = useRouter();
     const route = useRoute();
     const formRef = ref();
@@ -48,7 +48,7 @@ export default defineComponent({
       formRef.value.validate(async (errors: any) => {
         if (!errors) {
           const { username, password } = formInline;
-          message.loading('登录中...');
+          // message.loading('登录中...');
           loading.value = true;
 
           const params: FormState = {
@@ -83,10 +83,7 @@ export default defineComponent({
             //   // message.info(some.msg || "登录失败");
             // }
           } catch (e: any) {
-            message.destroyAll();
-            loading.value = false;
-            message.error(e.msg);
-            console.log(e);
+            console.log(e, 'e');
           } finally {
             loading.value = false;
           }
@@ -167,6 +164,7 @@ export default defineComponent({
               onClick={handleSubmit}
               size="large"
               disabled={loading.value}
+              loading={loading.value}
               block>
               立即登录
             </NButton>

vite.config.ts

@@ -12,6 +12,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
+const proxyUrl = 'https://test.lexiaoya.cn';
 export default defineConfig({
   base: './',
   plugins: [
@@ -37,12 +38,12 @@ export default defineConfig({
     port: 5002,
     strictPort: true,
     cors: true,
-    https: false
-    // proxy: {
-    //   '/api-oauth': {
-    //     target: proxyUrl,
-    //     changeOrigin: true
-    //   }
-    // }
+    https: false,
+    proxy: {
+      '/api-oauth': {
+        target: proxyUrl,
+        changeOrigin: true
+      }
+    }
   }
 });