infly-libs/module/Permission.js

工具组件库

import Uts from "./Uts";
import TokenService from "./TokenService";

/**
 * 路由拦截器
 * @param {Object} config 配置项
 * @param {Array} config.whiteList 白名单路径
 * @param {String} config.pagePathCacheKey 页面路径缓存的键
 * @param {Object} config.router 路由实例
 * @param {Object} config.store Vuex store 实例
 * @param {Object} config.NProgress NProgress 实例
 * @param {Function} config.getToken 获取 token 的函数
 * @param {Function} config.getUserInfo 获取用户信息的函数
 * @param {Function} config.resetToken 重置 token 的函数
 * @param {Function} config.showMessage 显示消息的函数
 * @param {Function} config.getTitle 获取页面标题的函数
 * * @returns {void}
 */
export function initPermission({
  whiteList = ["/login"],
  getUserInfoAction = "user/getInfo",
  resetTokenAction = "user/resetToken",
  refreshTokenAction = "user/refreshToken",
  pagePathCacheKey, // 页面路径缓存
  router,
  store,
  defaultSettings = {},
  NProgress,
  Message,
  getUserInfo,
  resetToken,
  showMessage
}) {
  const { title: projectTitle } = defaultSettings || {};
  const { dispatch } = store || {};

  const redirectToLogin = (to, next) => {
    next(`/login?redirect=${to.path}`);
    NProgress.done();
    return;
  };

  const handleGetUserInfo = () => {
    if (Uts.isFunction(getUserInfo)) {
      return getUserInfo();
    } else if (Uts.isFunction(dispatch)) {
      return dispatch(getUserInfoAction);
    }
  };

  const handleResetToken = () => {
    if (Uts.isFunction(resetToken)) {
      return resetToken();
    } else if (Uts.isFunction(dispatch)) {
      return dispatch(resetTokenAction);
    }
  };

  const handleShowMessage = (message, type = "error") => {
    if (Uts.isFunction(showMessage)) {
      showMessage(message);
    }

    if (Uts.isFunction(Message)) {
      Message[type](message);
    }

    console.log(message);
  };

  const handlePageTitle = (path) => {
    const title = projectTitle || "后台管理系统";
    if (path) {
      return `${path} - ${title}`;
    }
    return `${title}`;
  };

  NProgress.configure({ showSpinner: false });

  router.beforeEach(async (to, from, next) => {
    NProgress.start();
    document.title = handlePageTitle(to.meta.title);

    if (!whiteList.includes(to.path) && pagePathCacheKey) {
      localStorage.setItem(pagePathCacheKey, window.location.href);
    }

    const Token = TokenService.getToken();
    const accessTokenKey = TokenService.getUrlTokenKey();
    const accessToken = TokenService.getUrlToken();

    // 处理 URL 中的 accessToken 参数
    if (to.query[accessTokenKey]) {
      const newQuery = { ...to.query };

      // 优先从地址栏获取token, 更新存储token值
      if (accessToken && Uts.isFunction(dispatch)) {
        await dispatch(refreshTokenAction, { token: accessToken });
      }

      delete newQuery[accessTokenKey];
      NProgress.done();
      return next({ path: to.path, query: newQuery, replace: true });
    }

    // 检查白名单路径
    if (whiteList.includes(to.path)) {
      NProgress.done();
      return next();
    }

    if (Token) {
      // 如果已登录，但尝试访问登录页，则重定向到首页
      if (to.path === "/login") {
        NProgress.done();
        next({ path: "/" });
      } else {
        try {
          await handleGetUserInfo();
          NProgress.done();
          next();
        } catch (error) {
          const { message = "" } = error || {};
          // handleShowMessage(message || error || "验证失败, 请重新登录");
          await handleResetToken();
          redirectToLogin(to, next);
        }
      }
    } else {
      redirectToLogin(to, next);
    }
  });

  router.afterEach(() => {
    NProgress.done();
  });
}