添加退出&固定登录账号&loadingbar

src/components/layout/layoutTop.tsx

@@ -8,11 +8,15 @@ import closeIcon from './images/closeIcon.png';
 import clockIcon from './images/clockIcon.png';
 import schoolDot from './images/schoolDot.png';
 import personIcon from './images/personIcon.png';
+import { useUserStore } from '@/store/modules/users';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   name: 'layoutTop',
   setup() {
+    const router = useRouter();
     const showHeadFlag = ref(false);
+    const users = useUserStore();
     return () => (
       <>
         <div class={styles.layoutTop}>
@@ -95,7 +99,12 @@ export default defineComponent({
                     <p class={styles.smallTitle}>修改密码</p>
                   </div>
                 </div>
-                <div class={styles.logoutInfo}>
+                <div
+                  class={styles.logoutInfo}
+                  onClick={() => {
+                    users.logout();
+                    router.replace('/login');
+                  }}>
                   <div class={styles.propWrapItem}>
                     <NImage
                       class={styles.smallIcon}

src/main.ts

@@ -1,11 +1,12 @@
 import { createApp } from 'vue';
 import App from './App';
-import router from './router/index';
+import router, { setupRouter } from './router/index';
 import dayjs from 'dayjs';
 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
@@ -20,10 +21,14 @@ async function setupApp() {
   // store plugin: pinia
   setupStore(app);
 
+  setupRouter(app);
+
   dayjs.locale('zh-ch');
 
   app.use(router);
 
+  await router.isReady();
+
   // mount app
   app.mount('#app');
 }

src/plugins/naive.ts

@@ -126,6 +126,7 @@ const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
 );
 
 (window as any)['$message'] = message;
+(window as any)['$loadingBar'] = loadingBar;
 
 // const w = window as any
 // window['$message'] = message

src/router/index.ts

@@ -42,7 +42,7 @@ export function stringifyQuery(obj: LocationQueryRaw): string {
       const value: any = obj[key];
       if (isUndefined(value)) return '';
       if (isNull(value)) return key;
-      if (isArray(value)) {
+      if (Array.isArray(value)) {
         const resArray: string[] = [];
         value.forEach((item: string) => {
           if (isUndefined(item)) return;

src/router/router-guards.ts

@@ -1,21 +1,20 @@
 import { isNavigationFailure, Router } from 'vue-router';
-// import { useUserStoreWidthOut } from '@/store/modules/user';
+import { useUserStore } from '@/store/modules/users';
 import { storage } from '@/utils/storage';
 import { PageEnum } from '@/enums/pageEnum';
-import { useLoadingBar } from 'naive-ui';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 
 const whitePathList = [LOGIN_PATH]; // no redirect whitelist
 
-const Loading = useLoadingBar();
-
 export function createRouterGuards(router: Router) {
-  // const userStore = useUserStoreWidthOut();
+  const userStore = useUserStore();
   router.beforeEach(async (to, from, next) => {
     console.log('access token');
-    Loading && Loading.start();
+    window.$loadingBar && window.$loadingBar.start();
+
+    // console.log(window.$loadingBar, '232332');
     if (from.path === LOGIN_PATH && to.name === 'errorPage') {
       next(PageEnum.BASE_HOME);
       return;
@@ -40,17 +39,19 @@ export function createRouterGuards(router: Router) {
         path: LOGIN_PATH,
         replace: true
       };
+
       if (to.path) {
         redirectData.query = {
           ...redirectData.query,
           redirect: to.path
         };
       }
+      console.log(redirectData, to);
       next(redirectData);
       return;
     }
 
-    // await userStore.GetInfo();
+    await userStore.getInfo();
 
     // const redirectPath = (from.query.redirect || to.path) as string;
     // const redirect = decodeURIComponent(redirectPath);
@@ -58,7 +59,7 @@ export function createRouterGuards(router: Router) {
     //   to.path === redirect ? { ...to, replace: true } : { path: redirect };
     // next(nextData);
     next();
-    Loading && Loading.finish();
+    // window.$loadingBar && window.$loadingBar.finish();
   });
 
   router.afterEach((to, _, failure) => {
@@ -88,7 +89,7 @@ export function createRouterGuards(router: Router) {
     //   }
     // }
     // asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
-    Loading && Loading.finish();
+    window.$loadingBar && window.$loadingBar.finish();
   });
 
   // router.onError(error => {});

src/store/modules/users.ts

@@ -49,8 +49,11 @@ export const useUserStore = defineStore('user-store', {
       this.info = info;
     },
     // 登录
-    async login() {
+    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) {

src/views/login/index.tsx

@@ -35,14 +35,13 @@ export default defineComponent({
     const route = useRoute();
     const formRef = ref();
     const message = useMessage();
-    console.log(message);
     const loading = ref(false);
     const autoLogin = ref(true);
     const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
     const showPwd = ref(false);
     const formInline = reactive({
-      username: '',
-      password: '',
+      username: 'admin',
+      password: '123456',
       isCaptcha: true
     });
     const userStore = useUserStore();
@@ -64,7 +63,7 @@ export default defineComponent({
           };
 
           try {
-            const some = await userStore.login();
+            await userStore.login(params);
             // return;
             message.destroyAll();
             // if (some.code == ResultEnum.SUCCESS) {
@@ -85,6 +84,11 @@ export default defineComponent({
             // } else {
             //   // message.info(some.msg || "登录失败");
             // }
+          } catch (e: any) {
+            message.destroyAll();
+            loading.value = false;
+            message.error(e.msg);
+            console.log(e);
           } finally {
             loading.value = false;
           }
@@ -136,8 +140,7 @@ export default defineComponent({
                     inputProps={{ autocomplete: 'off' }}
                     class={[showPwd.value ? '' : styles['no-pwd']]}
                     onKeydown={(e: KeyboardEvent) => {
-                      console.log(e, 'onKeydown');
-                      if (e.keyCode === 13) {
+                      if (e.code === 'Enter') {
                         handleSubmit();
                       }
                     }}>