如何在React前端查看Auth0用户角色并实现权限控制

一、先把角色嵌入到用户的ID Token（推荐方案） #

单页应用直接调用Management API确实存在安全风险，正确的做法是通过Auth0的**规则（Rules）**把用户角色直接嵌入到ID Token中，前端登录后就能直接获取，无需额外请求。

1. 登录Auth0控制台，进入「规则」页面，点击「创建规则」选择「空规则」
2. 替换规则代码为以下内容：

function (user, context, callback) {
  // 从用户的app_metadata中读取角色（若角色存在于user_metadata则改为user.user_metadata）
  const roles = user.app_metadata?.roles || [];
  // 把角色写入ID Token的自定义字段，注意命名空间必须是合法URL格式
  context.idToken['https://your-custom-domain/roles'] = roles;
  
  // 若需要从Auth0角色管理系统中直接拉取角色，可改用以下逻辑（需开启规则内API权限）
  // auth0.users.getRoles({ id: user.user_id })
  //   .then(rolesRes => {
  //     context.idToken['https://your-custom-domain/roles'] = rolesRes.map(r => r.name);
  //     callback(null, user, context);
  //   })
  //   .catch(err => callback(err));
  
  callback(null, user, context);
}

将代码中的https://your-custom-domain/roles替换为你自己的命名空间（必须符合URL格式，Auth0要求自定义字段需带命名空间避免冲突）。

二、在React组件中获取并判断角色 #

使用Auth0官方的React SDK (@auth0/auth0-react)，通过useAuth0钩子获取用户信息：

1. 确保已在项目根组件中初始化Auth0Provider：

import { Auth0Provider } from '@auth0/auth0-react';

ReactDOM.render(
  <Auth0Provider
    domain="你的Auth0域名"
    clientId="你的客户端ID"
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);

2. 在需要控制展示的组件中编写逻辑：

import { useAuth0 } from '@auth0/auth0-react';

function RoleRestrictedContent() {
  const { user, isAuthenticated } = useAuth0();

  if (!isAuthenticated) return <div>请登录后查看</div>;

  // 从ID Token的自定义字段中读取角色
  const userRoles = user['https://your-custom-domain/roles'] || [];

  // 若角色存储在元数据中，直接从user对象读取
  // const userRoles = user.app_metadata?.roles || [];
  // const userRoles = user.user_metadata?.roles || [];

  return (
    <>
      {userRoles.includes('role1') && <h1>The role 1 is enabled</h1>}
      {userRoles.includes('role2') && <h1>The role 2 is enabled</h1>}
    </>
  );
}

export default RoleRestrictedContent;

三、元数据的直接访问方式 #

如果已经将角色存入用户的元数据中，在React的user对象里可直接通过以下路径访问：

• 用户自定义元数据：user.user_metadata?.roles
• 应用级全局元数据：user.app_metadata?.roles
  （使用可选链操作符?.可避免元数据不存在时抛出错误）

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