Authorization in Blazor

Blazor의 권한 부여, 특히 사용자의 인증 상태에 따라 UI 요소를 표시하고 숨기는 방법에 대해 설명합니다.

ASP.NET Core에서 권한 부여

• 인증은 사용자가 누구인지 식별하는 프로세스입니다. 
• 권한 부여는 사용자가 할 수 있는 것과 할 수 없는 것을 식별하는 프로세스입니다.
• 예를 들어, 로그인한 사용자가 관리자인 경우 주문을 생성, 읽기, 업데이트 및 삭제할 수 있지만 일반 사용자는 주문을 볼 수만 있고 주문 생성, 업데이트 또는 삭제는 할 수 없습니다.

액세스는 일반적으로 다음 여부에 따라 허용되거나 거부됩니다.

• 사용자가 인증(로그인)되었습니다.
• 사용자는 역할에 있습니다.
• 사용자에게 소유권이 있습니다.
• 정책이 만족됩니다

Blazor AuthorizeView 구성 요소

• Blazor에서는 구성 요소를 사용하여 AuthorizeView사용자에게 UI 요소를 볼 수 있는 권한이 있는지 여부에 따라 UI 요소를 표시하거나 숨깁니다.
• 이 예에서 AuthorizeView구성요소는 매개변수(예: 역할 또는 정책) 없이 가장 간단한 형태로 사용되므로 사용자가 인증되었는지 여부만 확인합니다.
• 사용자가 인증되면 구성 요소의 콘텐츠 <Authorized>가 표시되고, 그렇지 않으면 구성 요소의 콘텐츠 <NotAuthorized>가 표시됩니다.

<AuthorizeView>
    <Authorized>
        This content is displayed only if the user is Authorized
    </Authorized>
    <NotAuthorized>
        This content is displayed if the user is Not Authorized
    </NotAuthorized>
</AuthorizeView>

CascadingAuthenticationState 구성 요소

다음과 같은 오류가 발생하는 경우

InvalidOperationException: 권한 부여에는 Task<AuthenticationState> 유형의 계단식 매개 변수가 필요합니다. 이를 제공하려면 CascadingAuthenticationState를 사용하는 것이 좋습니다.

오류 메시지는 명확합니다. 이는 우리에게 무엇을 해야 하는지 알려줍니다. 인증 상태는 애플리케이션에 제공되어야 하며 구성 <Router>요소를 <CascadingAuthenticationState>구성 요소로 래핑하여 이를 수행합니다. 구성 요소가 파일 App.razor 에 <Router>에 있습니다 .

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

<AuthorizeView Roles="administrator, manager">
    <p>Displayed if the logged in user is in administrator or manager role</p>
</AuthorizeView>

<AuthorizeView Policy="admin-policy">
    <p>Displayed if the logged in user staisfies admin-policy</p>
</AuthorizeView>

<AuthorizeView>
    <Authorized>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="/identity/account/logout" Match="NavLinkMatch.All">
                <span class="oi oi-power-standby" aria-hidden="true"></span> 
                Logout (@context.User.Identity.)
            </NavLink>
        </li>
    </Authorized>
</AuthorizeView>