使用@auth0/nextjs-auth0 v2.2.1获取登录用户角色并实现菜单权限控制

核心问题定位 #

你代码里的命名空间拼写错误是导致拿不到角色的主要原因：https://saintlySinners.co,uk里的逗号,应该改成点.，正确的命名空间是https://saintlySinners.co.uk。这个错误会导致自定义声明的key不匹配，自然无法通过user['https://saintlySinners.co.uk/roles']获取到值。

步骤1：修正PostLogin动作代码 #

更新你的PostLogin动作，把命名空间的逗号替换成点：

exports.onExecutePostLogin = async (event, api) => {
 const namespace = 'https://saintlySinners.co.uk'; // 修正域名拼写
 if (event.authorization) {
  api.idToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
  api.accessToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
 }
};

修改后记得保存并启用这个动作。

步骤2：验证Auth0基础配置 #

• 确认用户已被分配对应角色：在Auth0控制台的用户管理中，检查目标用户的角色列表，确保存在你期望的角色（比如admin）。
• 检查应用签名算法：进入应用的「高级设置」→「OAuth」，确认JsonWebToken签名算法为RS256（HS256可能导致自定义声明无法正确解析）。

步骤3：在AppMenu.tsx中正确获取角色 #

方法1：直接从useUser()的user对象获取

如果命名空间修正后，user对象应该能直接包含角色声明，你可以这样访问：

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

const AppMenu = () => {
  const { user } = useAuth0();
  const namespace = 'https://saintlySinners.co.uk';
  const userRoles = user?.[`${namespace}/roles`] || [];

  return (
    <nav>
      <ul>
        <li>首页</li>
        <li>个人中心</li>
        {/* 管理员专属菜单 */}
        {userRoles.includes('admin') && (
          <li>管理员控制台</li>
        )}
      </ul>
    </nav>
  );
};

export default AppMenu;

方法2：解析Access Token获取角色（备用方案）

如果useUser()仍然无法获取到角色，可以通过解析Access Token来提取：

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

const AppMenu = () => {
  const { user, getAccessTokenSilently } = useAuth0();
  const [userRoles, setUserRoles] = useState<string[]>([]);

  useEffect(() => {
    const fetchRoles = async () => {
      try {
        const token = await getAccessTokenSilently();
        // 解析JWT的Payload部分
        const payload = JSON.parse(atob(token.split('.')[1]));
        const namespace = 'https://saintlySinners.co.uk';
        setUserRoles(payload[`${namespace}/roles`] || []);
      } catch (err) {
        console.error('获取角色失败:', err);
      }
    };

    if (user) fetchRoles();
  }, [user, getAccessTokenSilently]);

  return (
    <nav>
      <ul>
        <li>首页</li>
        <li>个人中心</li>
        {userRoles.includes('admin') && <li>管理员控制台</li>}
      </ul>
    </nav>
  );
};

export default AppMenu;

额外检查项 #

• 确认PostLogin动作处于启用状态：在Auth0控制台的「动作」→「登录流」中，确保该动作已添加并启用。
• 清除浏览器缓存：之前错误的Token可能还在缓存中，清除后重新登录测试。

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson