How is Authorised Routes and Content Handled

What is the equivalent way to do the following in Bolero?

Authorized Views

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <p>You can only see this content if you're authenticated.</p>
    </Authorized>
    <Authorizing>
        <h1>Authentication in progress</h1>
        <p>You can only see this content while authentication is in progress.</p>
    </Authorizing>
    <NotAuthorized>
        <h1>Authentication Failure!</h1>
        <p>You're not signed in.</p>
    </NotAuthorized>
    <AuthorizeView Roles="admin, superuser">
       <p>You can only see this if you're an admin or superuser.</p>
   </AuthorizeView>
</AuthorizeView>

Authorized Attribute

@page "/"
@attribute [Authorize(Roles = "admin, superuser")]

<p>You can only see this if you're in the 'admin' or 'superuser' role.</p>

Authorized Routes

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <h1>Sorry</h1>
                <p>You're not authorized to reach this page.</p>
                <p>You may need to log in as a different user.</p>
            </NotAuthorized>
            <Authorizing>
                <h1>Authentication in progress</h1>
                <p>Only visible while authentication is in progress.</p>
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <h1>Sorry</h1>
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

[Tarmil]

I’ve started to look into how to best handle authorization, but I don’t really have full guidelines to do this yet. That being said, it should be possible to call AuthorizeView directly using comp, something like this (untested):

comp<AuthorizeView> [] [
    comp<Authorized> [] [
        h1 [] [textf "Hello, %s!" context.User.Identity.Name]
        p [] [text "You can only see this content if you're authenticated."]
    ]
    comp<Authorizing> [] [
        h1 [] [text "Authentication in progress"]
        p [] [text "You can only see this content while authentication is in progress."]
    ]
    comp<NotAuthorized> [] [
        h1 [] [text "Authentication failure!"]
        p [] [text "You're not signed in."]
    ]
    comp<AuthorizeView> ["Roles" => "admin, superuser"] [
        p [] [text "You can only see this if you're an admin or superuser."]
    ]
]

I think using [<Authorize(Roles = "admin, superuser")>] on a component class (for example on a class inheriting from ElmishComponent) should be equivalent to the second case, although I don’t quite know how and when it’s checked.

[OnurGumus]

Just wanted to share my opinion on the matter. In functional programming, we generally avoid these kind of magical components, because of power of composition, usually it’s not hard to come up with your home grown solution that achieves the same.