Блог

Я создал веб-приложение nextjs с помощью Auth0.

Пользователь может войти в систему и выйти из системы. Я также могу получить информацию о пользователе. Но я не вижу ролей пользователей.

Я получаю профиль с getSession помощью метода Auth0.

Я хочу создать 2 разные страницы в NextJS, которые предназначены для user ролей и admin ролей.

Таким образом, я хочу получить базовую авторизацию api. Если пользователь находится в user роли, то он может получить доступ только к странице пользователя. Если у пользователя есть admin роль, то он может получить доступ ко всем страницам.

Чтобы достичь этого, мне нужно получить роли пользователей. getSession Метод не возвращает роли пользователей.

Как можно решить эту проблему?

Спасибо

Я уверен, что вы уже поняли это, но у меня был тот же вопрос.

Вы должны явно добавить роли в свои токены (аутентификация и идентификатор), если хотите, чтобы они были присоединены к объекту пользователя.

Вы можете сделать это несколькими способами, но я сделал это, добавив правило в Auth0:

 function setRolesToUser(user, context, callback) {
  const namespace = 'http://my-website-name.com';
  const assignedRoles = (context.authorization || {}).roles;

  let idTokenClaims = context.idToken || {};
  let accessTokenClaims = context.accessToken || {};

  idTokenClaims[`${namespace}/roles`] = assignedRoles;
  accessTokenClaims[`${namespace}/roles`] = assignedRoles;

  context.idToken = idTokenClaims;
  context.accessToken = accessTokenClaims;

  callback(null, user, context);
}
 

Теперь ваши токены будут иметь правило, прикрепленное в виде массива пространства имен с назначенными ролями в указанном массиве.

Теперь, когда к вашим токенам прикреплены роли, вы можете использовать их для создания контента на Nextjs, как это:

 import { getSession } from '@auth0/nextjs-auth0';

export async function getServerSideProps({ req, res }) {
 
  const session = getSession(req, res);
  if (!session?.user['http://my-website-name/roles'].includes('admin')) {
    return { props: { error: 'Forbidden' } };
  } else {
    return {
      props: {},
    };
  }
}
 

Затем в вашем компоненте вы можете вернуться пораньше, вот так:

 if (error) return <div>{error}</div>;
 

Это объясняет серверную сторону, но вы можете сделать то же самое на стороне клиента с пользователем:

 import { useUser} from '@auth0/nextjs-auth0';