BoundLink-Plate-UI/src/router/index.js

/*
 * 路由
 *
 * @Author:    admin
 * @Date:      2022-09-06 20:52:04
 */
import nProgress from 'nprogress';
import 'nprogress/nprogress.css';
import {nextTick} from 'vue';
import {createRouter, createWebHashHistory} from 'vue-router';
import {routerArray} from './routers';
import {PAGE_PATH_404, PAGE_PATH_AUTO_LOGIN, PAGE_PATH_LOGIN} from '/@/constants/common-const';
import {HOME_PAGE_NAME,HOME_PAGE_PATH} from '/@/constants/system/home-const';
import SmartLayout from '../layout/index.vue';
import {useUserStore} from '/@/store/modules/system/user';
import {localClear, localRead,localSave} from '/@/utils/local-util';
import _ from 'lodash';
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
import useBsDict from "/@/utils/dict.js";

export const router = createRouter({
  history: createWebHashHistory(),
  routes: routerArray,
  strict: true,
  scrollBehavior: () => ({left: 0, top: 0}),
});

// ----------------------- 路由加载前 -----------------------
router.beforeEach(async (to, from, next) => {
  // 进度条开启
  nProgress.start();

  // 如果是白名单，不需要拦截，直接放行
  if (to.meta.isWhite) {
    next();
    return;
  }


  // 公共页面，任何时候都可以跳转
  if (to.path === PAGE_PATH_404) {
    next();
    return;
  }

  // 验证登录
  if(to.query.token && to.query.isMobile){
    localSave(LocalStorageKeyConst.USER_TOKEN, to.query.token ? to.query.token : '');
    next();
    return;
  }
  const token = localRead(LocalStorageKeyConst.USER_TOKEN);
  if (!token && to.path != PAGE_PATH_AUTO_LOGIN) {//autoLogin页面不需要登录验证
    useUserStore().logout();
    if (to.path === PAGE_PATH_LOGIN) {
      next();
    } else {
      next({path: PAGE_PATH_LOGIN});
    }
    return;
  }

  // if(!token){
  //     next({path: HOME_PAGE_PATH});
  //     return;
  // }

  // 登录页，则跳转到首页
  if (to.path === PAGE_PATH_LOGIN) {
    next({path: HOME_PAGE_PATH});
    return;
  }

  // 首页（ 需要登录 ，但不需要验证权限）
  if (to.path === HOME_PAGE_NAME) {
    next();
    return;
  }

  // 下载路由对应的 页面组件，并修改组件的Name，如果修改过，则不需要修改
  let toRouterInfo = routerMap.get(to.name);
  if (toRouterInfo && _.isFunction(toRouterInfo.component) && toRouterInfo.meta.renameComponentFlag === false) {
    // 因为组件component 为 lazy load是个方法，所以可以直接执行 component()方法
    toRouterInfo.component().then((val) => {
      // 修改组件的name
      val.default.name = to.meta.componentName;
      // 记录已经修改过 组件的name
      toRouterInfo.meta.renameComponentFlag = true;
    });
  }

  // 设置tagNav
  useUserStore().setTagNav(to, from);

  // 设置keepAlive
  if (to.meta.keepAlive) {
    nextTick(() => {
      useUserStore().pushKeepAliveIncludes(to.meta.componentName);
    });
  }

  // 初始化字典
  await useBsDict.init();
  next();
});

// ----------------------- 路由加载后 -----------------------
router.afterEach(() => {
  nProgress.done();
});

// ----------------------- 构建router对象 -----------------------
const routerMap = new Map();

export function buildRoutes(menuRouterList) {
  let menuList = menuRouterList ? menuRouterList : useUserStore().getMenuRouterList || [];
  /**
   * 1、构建整个路由信息
   * 2、添加到路由里
   */
  const routerList = [];
  // 获取所有vue组件引用地址 用于构建路由
  const modules = import.meta.glob('../views/**/**.vue');
  // 获取所有vue组件 用于注入name属性 name属性用于keep-alive

  //1、构建整个路由信息
  for (const e of menuList) {
    if (!e.menuId) {
      continue;
    }
    if (!e.path) {
      continue;
    }
    if (e.deletedFlag && e.deletedFlag === true) {
      continue;
    }
    let route = {
      path: e.path.startsWith('/') ? e.path : `/${e.path}`,
      // 使用【menuId】作为name唯一标识
      name: e.menuId.toString(),
      meta: {
        // 数据库菜单(页面)id
        id: e.menuId.toString(),
        // 组件名称
        componentName: e.menuId.toString(),
        // 菜单展示
        title: e.menuName,
        // 菜单图标展示
        icon: e.icon,
        // 是否在菜单隐藏
        hideInMenu: !e.visibleFlag,
        // 页面是否keep-alive缓存
        keepAlive: e.cacheFlag,
        // 是否为外链
        frameFlag: e.frameFlag,
        // 外链地址
        frameUrl: e.frameUrl,
        // 是否 rename了组件的名字
        renameComponentFlag: false,
      },
    };

    if (e.frameFlag) {
      route.component = () => import('../components/framework/iframe/iframe-index.vue');
    } else {
      let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component;
      let relativePath = `../views${componentPath}`;
      // // eslint-disable-next-line no-prototype-builtins
      route.component = modules[relativePath];
    }
    routerList.push(route);
    routerMap.set(e.menuId.toString(), route);
  }

  //2、添加到路由里
  router.addRoute({
    path: '/',
    meta: {},
    component: SmartLayout,
    children: routerList,
  });
}