如何在React前端正确读取数据库枚举存储的角色值实现权限控制

你的权限判断失效、x is not defined报错来自两个核心问题：

• 前后端枚举值不匹配：后端C#枚举默认序列化为数值，Admin对应0、User对应1，你最初定义的前端Role常量用了字符串值，后续就算改成0、1如果没做类型对齐（比如后端返回数字你拿字符串'0'比较），三等号判断也会返回false。
• 空值防护逻辑不完善：当认证服务初始推送null（未登录状态）时，如果你在短路判断逻辑外直接访问x.role，就会触发x未定义的报错。

1. 对齐前后端角色枚举值 #

前端Role常量直接使用和后端完全一致的数值定义，不要用字符串：

export const Role = {
    Admin: 0,
    User: 1
}

如果你在ASP.NET Core的Json配置中加了JsonStringEnumConverter，接口会把枚举序列化为"Admin"/"User"字符串，这时候你把前端常量改回对应字符串即可，默认配置下ASP.NET Core 5会将枚举序列化为数字。

2. 修复订阅逻辑的空值判断 #

把componentDidMount中的订阅逻辑改成显式空值处理，从根源避免x未定义报错：

componentDidMount() {
    authenticationService.currentUser.subscribe(x => {
        // 未登录场景直接重置状态
        if (!x) {
            this.setState({
                currentUser: null,
                isAdmin: false
            });
            return;
        }
        // 确认x存在后再访问role属性，严格匹配类型和值
        this.setState({
            currentUser: x,
            isAdmin: x.role === Role.Admin
        });
    });
}

3. 校准PrivateRoute权限校验逻辑 #

你给Admin路由传入了roles={[Role.Admin]}参数，要确保PrivateRoute内部的校验逻辑也是同类型值比较，参考实现：

const PrivateRoute = ({ component: Component, roles, ...rest }) => {
    // 从你项目的状态管理中获取当前登录用户
    const currentUser = authenticationService.currentUserValue;
    return (
        <Route
            {...rest}
            render={props => {
                // 未登录跳转登录页
                if (!currentUser) {
                    return <Redirect to={{ pathname: "/login", state: { from: props.location } }} />;
                }
                // 角色校验：如果路由配置了允许角色，检查当前用户角色是否在列表中
                if (roles && !roles.includes(currentUser.role)) {
                    // 无权限跳转首页或403页面
                    return <Redirect to="/" />;
                }
                // 校验通过，渲染目标组件
                return <Component {...props} />;
            }}
        />
    );
};

如果修改后权限判断仍不生效，直接打印接口返回的用户信息，确认currentUser.role的实际值和类型：

• 如果是数字0/1，保持现有常量定义即可
• 如果是字符串"0"/"1"或者"Admin"/"User"，对应修改前端Role常量的值，保证和接口返回值完全一致即可，不需要修改后端数据库的枚举存储方案。

内容的提问来源于stack exchange，提问作者Rasta