fix: vue2修复404与白屏 (#174)

* fix: vue2修复404与白屏

* fix: 检视意见修改

packages/toolkits/pro/template/tinyvue2/src/api/user.ts

@@ -38,6 +38,16 @@ export interface UserData {
   filterType?: [];
 }
 
+export type Role = {
+  id: number;
+  name: string;
+  permission: {
+    name: string;
+    desc: string;
+    id: number;
+  }[];
+};
+
 export function login(data: LoginData) {
   return axios.post<LoginRes>('/api/auth/login', data);
 }

packages/toolkits/pro/template/tinyvue2/src/main.ts

@@ -13,6 +13,7 @@ import chinaMap from './assets/chaina.json';
 import { registerMap } from 'echarts';
 import Breadcrumb from '@/components/breadcrumb/index.vue';
 import * as icons from '@opentiny/vue-icon';
+import VueRouter from 'vue-router';
 
 // 全局注册所有图标组件
 Object.keys(icons).forEach((key) => {
@@ -22,6 +23,7 @@ Object.keys(icons).forEach((key) => {
 registerMap('china', chinaMap as any);
 
 Vue.use(PiniaVuePlugin);
+Vue.use(VueRouter);
 Vue.component('Breadcrumb', Breadcrumb);
 Vue.use(directive);
 

packages/toolkits/pro/template/tinyvue2/src/router/guard/index.ts

@@ -1,11 +1,11 @@
 import { setupMenuGuard } from './menu';
 import { setupTabsGuard } from './tabs';
-// import setupInfoGuard from './info';
+import setupInfoGuard from './info';
 import setupPermissionGuard from './permission';
 
 function setupPageGuard(router: any) {
   setupPermissionGuard(router);
-  // setupInfoGuard(router);
+  setupInfoGuard(router);
   setupMenuGuard(router);
   setupTabsGuard(router);
 }

packages/toolkits/pro/template/tinyvue2/src/router/guard/info.ts

@@ -0,0 +1,30 @@
+import { getUserInfo, type Role } from '@/api/user';
+import { useUserStore } from '@/stores';
+import { setToken } from '@/utils/auth';
+
+export default function setupInfoGuard(router) {
+  router.beforeEach(async (to, from, next) => {
+    if (to.name === 'login' || to.name === 'notFound') {
+      next();
+      return;
+    }
+    const userStore = useUserStore();
+    const { data } = (await getUserInfo()) ?? { data: null };
+    if (!data) {
+      next({
+        name: 'login',
+        query: {
+          redirect: to.name,
+          ...to.query,
+        },
+      });
+      setToken('');
+      return;
+    }
+    userStore.setInfo(data);
+    userStore.rolePermission = (data.role as unknown as Role[])
+      .flatMap((role) => role.permission)
+      .map((permission) => permission.name);
+    next();
+  });
+}

packages/toolkits/pro/template/tinyvue2/src/router/guard/menu.ts

@@ -61,9 +61,16 @@ export const toRoutes = (menus: ITreeNodeData[]) => {
 };
 
 export const setupMenuGuard = (router: any) => {
+  let depth = 100;
   let has404 = false;
   router.beforeEach(async (to, from, next) => {
-    await nextTick();
+    if (to.name === 'notFound') {
+      next();
+      return;
+    }
+    if ((depth -= 1) <= 0) {
+      return;
+    }
     has404 = router
       .getRoutes()
       .some((route: RouteRecord) => route.name === 'notFound');
@@ -77,7 +84,7 @@ export const setupMenuGuard = (router: any) => {
     const menuStore = useMenuStore();
     if (menuStore.menuList.length) {
       if (!to.matched.length) {
-        next({ name: 'login', replace: true });
+        next({ name: 'notFound', replace: true });
         return;
       }
       next();

packages/toolkits/pro/template/tinyvue2/src/router/guard/permission.ts

@@ -1,12 +1,9 @@
-import { getUserInfo } from '@/api/user';
-import { useUserStore } from '@/stores';
-import { clearToken, isLogin } from '@/utils/auth';
-import { nextTick } from 'vue';
+import { isLogin } from '@/utils/auth';
 
 export default function setupPermissionGuard(router: any) {
-  router.beforeEach(async (to, from, next) => {
+  router.beforeEach((to, from, next) => {
     if (!isLogin()) {
-      if (to.name === 'login') {
+      if (to.name === 'login' || to.name === 'notFound') {
         next();
         return;
       }
@@ -15,22 +12,9 @@ export default function setupPermissionGuard(router: any) {
         query: {
           redirect: to.name,
           ...to.query,
-        } as any,
+        },
       });
     } else {
-      await nextTick();
-      const userStore = useUserStore();
-      if (!userStore.email) {
-        clearToken();
-        next({
-          name: 'login',
-          query: {
-            redirect: to.name,
-            ...to.query,
-          } as any,
-        });
-        return;
-      }
       next();
     }
   });

packages/toolkits/pro/template/tinyvue2/src/router/index.ts

@@ -7,9 +7,6 @@ import appRoutes from './routes';
 import { getToken } from '@/utils/auth';
 import createRouteGuard from '@/router/guard';
 import { notFound } from './not-found';
-
-Vue.use(VueRouter);
-
 const router = new VueRouter({
   mode: 'history',
   routes: [

packages/toolkits/pro/template/tinyvue2/src/stores/user.ts

@@ -89,6 +89,11 @@ export const useUserStore = defineStore('user', {
       this.$reset();
     },
 
+    async fetchInfo() {
+      const { data } = await getUserInfo();
+      this.setInfo(data);
+    },
+
     // Login
     async login(loginForm: LoginData) {
       try {

packages/toolkits/pro/template/tinyvue2/src/views/login/components/login-mail.vue

@@ -138,7 +138,29 @@ function handleSubmit() {
       const route = router
         .getRoutes()
         .filter((route) => route.name === redirectTo)[0];
-      router.replace({ path: route.path });
+      if (!route) {
+        const firstRoute = router.getRoutes().filter((route) => {
+          return (
+            route.path !== '' &&
+            !route.path.includes('login') &&
+            !route.path.includes('preview') &&
+            !route.path.includes('404') &&
+            route.path !== '/vue-pro'
+          );
+        })[0];
+        if (firstRoute) {
+          router.replace({ path: firstRoute.path });
+          return;
+        }
+        Notify({
+          type: 'error',
+          title: t('login.route.error'),
+          position: 'top-right',
+          duration: 2000,
+        });
+      } else {
+        router.replace({ path: route.path });
+      }
     } catch (err) {
       Notify({
         type: 'error',

packages/toolkits/pro/template/tinyvue2/src/views/login/locale/en-US.ts

@@ -46,4 +46,6 @@ export default {
   'login.tip.mail': "User name: admin{'@'}example.com; password: admin",
   'login.tip.right': 'Enter the correct user name and password',
   'login.main.text': 'TinyPro Mid-Back-End Front-End Solution',
+  'login.route.error':
+    'Uncapted routing exception, please contact the website administrator',
 };

packages/toolkits/pro/template/tinyvue2/src/views/login/locale/zh-CN.ts

@@ -40,7 +40,8 @@ export default {
   'login.banner.subSlogan3': '实现灵活的区块式开发',
   'login.icon.language': '语言',
   'login.tip.info': '用户名：admin，密码 admin',
-  'login.tip.mail': "用户名：[email protected]，密码 admin",
+  'login.tip.mail': '用户名：[email protected]，密码 admin',
   'login.tip.right': '请输入正确的用户名密码',
   'login.main.text': 'TinyPro 中后台前端解决方案',
+  'login.route.error': '路由出现错误, 请联系管理员',
 };