infly-libs/module/Permission.js

工具组件库

import Uts from "./Uts";

/**
 * 路由拦截器
 * @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"],
    pagePathCacheKey, // 页面路径缓存
    router,
    store,
    defaultSettings = {},
    NProgress,
    Message,
    getToken,
    getUserInfo,
    resetToken,
    showMessage,
}) {
    const { title: projectTitle } = defaultSettings || {};

    NProgress.configure({ showSpinner: false });

    const isDispatchFunc = store && Uts.isFunction(store.dispatch);

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

    const handleGetUserInfo = () => {
        if (isDispatchFunc && !getUserInfo) {
            return store.dispatch("user/getInfo");
        }

        if (Uts.isFunction(getUserInfo)) {
            return getUserInfo();
        }
    };

    const handleResetToken = () => {
        if (isDispatchFunc && !resetToken) {
            return store.dispatch("user/resetToken");
        }
        if (Uts.isFunction(resetToken)) {
            return resetToken();
        }
    };

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

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

        console.log(message);
    };

    const handleToken = () => {
        if (Uts.isFunction(getToken)) {
            return getToken();
        }

        if (store && store.getters && store.getters.token) {
            return store.getters.token;
        }

        return "";
    };

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

    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 = handleToken();

        if (Token) {
            if (to.path === "/login") {
                next({ path: "/" });
                NProgress.done();
            } else {
                try {
                    await handleGetUserInfo();
                    next();
                } catch (error) {
                    const { message = "" } = error || {};
                    handleShowMessage(message || error || "验证失败, 请重新登录");
                    await handleResetToken();
                    redirectToLogin(to, next);
                }
            }
        } else {
            if (whiteList.includes(to.path)) {
                next();
            } else {
                redirectToLogin(to, next);
            }
        }
    });

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