Как реализовать авторизацию на основе ролей в проекте React и ASP.NET Core?

В своем проекте я использовал ASP.NET Core Identity.

Репозиторий проекта:

https://github.com/hmahdavi921/ReactTypeScriptApp1

Programs.cs файл:

using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Options;
using ReactApp1.Server.Data;
using System.Security.Claims;

namespace ReactTypeScriptApp1.Server
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            var connectionString = builder.Configuration.GetConnectionString("ApplicationDbContextConnection") ?? throw new InvalidOperationException("Connection string 'ApplicationDbContextConnection' not found.");

            builder.Services.AddDbContext<ApplicationDbContext>(options => options.UseSqlServer(connectionString));

            builder.Services.AddAuthorization();
            builder.Services.AddIdentityApiEndpoints<ApplicationUser>()
                .AddEntityFrameworkStores<ApplicationDbContext>();

            // Add services to the container.
            builder.Services.AddControllers();

            // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen();

            var app = builder.Build();

            app.UseDefaultFiles();
            app.UseStaticFiles();

            app/*.MapGroup("/account")*/.MapIdentityApi<ApplicationUser>();

            app.MapPost("/logout", async (SignInManager<ApplicationUser> signInManager) =>
            {
                await signInManager.SignOutAsync();
                return Results.Ok();
            }).RequireAuthorization();

            app.MapGet("/pingauth", (ClaimsPrincipal user) =>
            {
                var email = user.FindFirstValue(ClaimTypes.Email); // get the user's email from the claim
                return Results.Json(new { Email = email }); ; // return the email as a plain text response
            }).RequireAuthorization();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseSwagger();
                app.UseSwaggerUI();
            }

            app.UseHttpsRedirection();

            app.UseAuthorization();

            app.MapControllers();

            app.MapFallbackToFile("/index.html");

            app.Run();
        }
    }
}

Я хочу разработать этот проект для поддержки авторизации на основе ролей.

Как я могу это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Добавить сервис «RoleManager»

builder.Services.AddIdentityApiEndpoints<ApplicationUser>()
    .AddRoles<IdentityRole>()
    .AddUserManager<UserManager<ApplicationUser>>()
    .AddRoleManager<RoleManager<IdentityRole>>() 
    .AddEntityFrameworkStores<ApplicationDbContext>();

Аккаунтконтроллер.cs

    [ApiController]
    public class AccountController : ControllerBase
    {
        private readonly UserManager<ApplicationUser> _userManager;
        private readonly RoleManager<IdentityRole> _roleManager;

        public AccountController(UserManager<ApplicationUser> userManager,RoleManager<IdentityRole> roleManager)
        {
            this._userManager = userManager;
            this._roleManager = roleManager;
        }


        //create a role named "developer"
        [HttpPost("createRole")]
        public async Task CreateRole(string roleName)
        {
            var role = new IdentityRole { Name = "roleName" };
            await _roleManager.CreateAsync(role);

        }


        //add an email to "developer"
        [HttpPost("addToRole")]
        public async Task AddToRole(string email,string roleName)
        {
            var user=await _userManager.FindByEmailAsync(email);
            if (user != null)
            { 
                await _userManager.AddToRoleAsync(user, roleName); 
            }
        }

    }

Затем, после того как вы войдете в систему с этой учетной записью, к которой добавлена ​​роль «разработчик», вы можете пройти [Authorize(Roles = "Developer")]

Другие вопросы по теме

Похожие вопросы

Prime React – Как я могу сделать вновь добавленные строки мгновенно редактируемыми?
Маркеры на ReactMapBoxGl не работают при добавлении слоев GL колоды
Реагируйте: создайте средство просмотра ДНК для очень длинной последовательности
Вкладка Tab внутри диалогового окна Data-Grid MUI закрывает его
Лучший способ получить данные в клиентском компоненте в Next.js 14: useEffect с обработчиками маршрутов и действием асинхронного сервера
Chart.js — ось X не отображает даты с метками времени в формате «ГГГГ-ММ-ДДТЧЧ: мм: сс.СССССС» (Reactchartjs-2)
Какова обычная практика вложения маршрутов в отдельные компоненты в React Router 6?
Как запретить пользователю выходить из полноэкранного режима в следующем js
Redux-toolkit — состояние обновлено, но при его использовании все еще получается начальное значение состояния
Обновление центра Google Map React с использованием результатов UseState в NaN