ruoyi-plus-soybean/src/router/permission.ts

import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
import { useTitle } from '@vueuse/core';
import { getToken } from '@/utils';
import { RouteNameMap } from './routes';

/**
 * 路由守卫函数
 * @param router - 路由实例
 */
export default function createRouterGuide(router: Router) {
  router.beforeEach((to, from, next) => {
    // 开始 loadingBar
    window.$loadingBar?.start();
    // 页面跳转逻辑
    handleRouterAction(to, from, next);
  });
  router.afterEach(to => {
    // 设置document title
    useTitle(to.meta.title as string);
    // 结束 loadingBar
    window.$loadingBar?.finish();
  });
}

function handleRouterAction(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
  const token = getToken();
  const isLogin = Boolean(token);
  const needLogin = Boolean(to.meta?.requiresAuth);

  const routerAction: [boolean, () => void][] = [
    // 已登录状态跳转登录页，跳转至首页
    [
      isLogin && to.name === RouteNameMap.get('login'),
      () => {
        next({ name: RouteNameMap.get('root') });
      }
    ],
    // 不需要登录权限的页面直接通行
    [
      !needLogin,
      () => {
        next();
      }
    ],
    // 未登录状态进入需要登录权限的页面
    [
      !isLogin && needLogin,
      () => {
        const redirectUrl = window.location.href;
        next({ name: RouteNameMap.get('login'), query: { redirectUrl } });
      }
    ],
    // 登录状态进入需要登录权限的页面,直接通行
    [
      needLogin && isLogin,
      () => {
        next();
      }
    ]
  ];

  routerAction.some(item => {
    const flag = item[0];
    if (flag) {
      item[1]();
    }
    return flag;
  });
}