likes
comments
collection
share

web前端权限管理

作者站长头像
站长
· 阅读数 35

针对前端页面和功能点,所做的权限管理。

角色定义:

const ROLE = {
    MANAGER: 1,
    USER: 2,
}

产品定义:

const PRODUCT_TYPE = {
    TESTA: 0,
    TESTB: 1
}

功能点定义:(具体到页面上的按钮,某些功能的显示隐藏等)

const FUNCTION_POINT = {
    SEARCH: "查询",
    MODIFY: "修改",
}

权限定义:(页面路径/功能点对应权限)

const AUTH = {
    "/user": `ROLE${ROLE.MANAGER}`,
    "/testA": `ROLE${ROLE.USER} && PRODUCT_TYPE${PRODUCT_TYPE.TESTA}`,
   "/testB": `ROLE${ROLE.USER} && PRODUCT_TYPE${PRODUCT_TYPE.TESTB}`,
    [FUNCTION_POINT.SEARCH]: `ROLE${ROLE.MANAGER}`,
}

权限管理:

let AuthManager = {
    role: null,
    productType: null,
    //初始化用户角色
    initial(role, productType) {
        this.role = role;
        this.productType = productType;
    },
    check(prop) {
        if (!AUTH[prop]) return true;
        let string = "return " + AUTH[prop];
        string = string.replaceAll("ROLE", `${this.role}===`);
        string = string.replaceAll("PRODUCT_TYPE", `${this.productType}===`);
        let result;
        try {
            // eslint-disable-next-line no-new-func
            result = new Function(string)();
        } catch {
            result = true;
        }
        return result;
    },
    getDefaultPage() {
        let result;
        switch (this.role) {
            case ROLE.MANAGER: result = "/"; break;
            case ROLE.USER:
                if (this.productType === PRODUCT_TYPE.TESTA) result = "/testA";
                if (this.productType === PRODUCT_TYPE.TESTB) result = "/testB";
                break;
            default:
                break;
        }
        return result;
    }
}

export default AuthManager;
转载自:https://segmentfault.com/a/1190000041442469
评论
请登录