classroom-instruments/src/router/router-guards.ts

import { isNavigationFailure, Router } from 'vue-router';
import { useUserStore } from '@/store/modules/users';
import { storage } from '@/utils/storage';
import { PageEnum } from '@/enums/pageEnum';
import { ACCESS_TOKEN } from '@/store/mutation-types';

const LOGIN_PATH = PageEnum.BASE_LOGIN;

const whitePathList = [LOGIN_PATH]; // no redirect whitelist
const isChrome = () => {
  const isChromium = (window as any).chrome;
  const winNav = window.navigator;
  const vendorName = winNav.vendor;
  const isOpera = typeof (window as any).opr !== 'undefined';
  const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
  const isIOSChrome = winNav.userAgent.match('CriOS');
  return (
    isIOSChrome ||
    (isChromium !== null &&
      typeof isChromium !== 'undefined' &&
      vendorName === 'Google Inc.' &&
      isOpera === false &&
      isIEedge === false)
  );
};
export function createRouterGuards(router: Router) {
  const userStore = useUserStore();
  router.beforeEach(async (to, from, next) => {
    console.log(to, '修改标题');
    // console.log('access token');
    document.title = to.meta.title ? to.meta.title : ('音乐数字课堂' as string);
    if (!isChrome()) {
      return;
    }
    window.$loadingBar && window.$loadingBar.start();

    // console.log(window.$loadingBar, '232332');
    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
      next(PageEnum.BASE_HOME);
      return;
    }

    // Whitelist can be directly entered
    if (whitePathList.includes(to.path as PageEnum)) {
      next();
      return;
    }

    const token = storage.get(ACCESS_TOKEN);
    // console.log(token, 'access token');
    if (!token) {
      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
      if (to.meta.ignoreAuth) {
        next();
        return;
      }
      // redirect login page
      const redirectData: { path: string; replace: boolean; query?: any } = {
        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();

    // const redirectPath = (from.query.redirect || to.path) as string;
    // const redirect = decodeURIComponent(redirectPath);
    // const nextData =
    //   to.path === redirect ? { ...to, replace: true } : { path: redirect };
    // next(nextData);
    next();
    // window.$loadingBar && window.$loadingBar.finish();
  });

  router.afterEach((to, _, failure) => {
    if (isNavigationFailure(failure)) {
      console.log('failed navigation', failure);
    }
    // const asyncRouteStore = useAsyncRouteStoreWidthOut();
    // // 在这里设置需要缓存的组件名称
    // const keepAliveComponents = asyncRouteStore.keepAliveComponents;
    // const currentComName: any = to.matched.find(
    //   item => item.name == to.name
    // )?.name;
    // if (
    //   currentComName &&
    //   !keepAliveComponents.includes(currentComName) &&
    //   to.meta?.keepAlive
    // ) {
    //   // 需要缓存的组件
    //   keepAliveComponents.push(currentComName);
    // } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
    //   // 不需要缓存的组件
    //   const index = asyncRouteStore.keepAliveComponents.findIndex(
    //     name => name == currentComName
    //   );
    //   if (index != -1) {
    //     keepAliveComponents.splice(index, 1);
    //   }
    // }
    // asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
    window.$loadingBar && window.$loadingBar.finish();
  });

  // router.onError(error => {});
}