路由拦截解决方案

1. Vue-Router 路由拦截解决方案

firstAsyncFetch - 工具函数 Utils-1

import VueRouter from 'vue-router';
import { firstAsyncFetch } from '@/utils/locals';

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes: [],
});

router.beforeEach((to, from, next) => {
  if (to.meta.authorization) {
    firstAsyncFetch('S_MENUS', () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          // Only one layer of data structure data is returned
          resolve([] as string[]);
        }, 2000);
      });
    }).then((menus) => {
      if (Array.isArray(menus)) {
        // To avoid users to modify the stored data, the data is encrypted
        firstAsyncFetch.setCookie(menus);
        if (menus.includes(to.path)) {
          next();
        }
      } else {
        next('/login');
      }
    });
  } else {
    next('/login');
  }
});