如何根据登录状态/角色来限制/控制用户可以访问的导航路线? [英] How can you restrict/control the navigation routes the user can visit based on login status/role?

问题描述

对于我的Xamarin.Forms应用程序，我正在寻找一种方法来检查用户是否具有访问页面的正确角色/身份验证状态.我知道Angular具有路由防护，可以将其重新用于不同的路由以检查身份验证状态.Xamarin.Forms中有类似的东西吗?

For my Xamarin.Forms app, I am looking for a way to check if a user has the right role/authentication status to access a page. I know Angular has route guards that can be reused for different routes to check for an authentication status. Is there something similar in Xamarin.Forms?

推荐答案

以下示例显示了如何根据用户的登录状态控制页面的可见性或导航.

Here is an example showing how you can control the visibility or navigation to your pages based on the login status of the user.

默认情况下，Shell始终始终最初显示在 AppShell.xaml 中定义的第一个元素，在这种情况下，它将显示为 Login.xaml 页面.

By default Shell will always displays initially the first element defined in AppShell.xaml, in this case it will be Login.xaml page.

在下面的示例中，"Page3"最初会显示，因为默认情况下( Isvisible = true )，而"Page2"仅当可绑定属性 IsLogged 为 true 时，它才可见.

In the below example "Page3" will be visible initially because by default (Isvisible=true), while "Page2" it will only be visible when the bindable property IsLogged is true.

• 当用户在 IsLogged_PropertyChanged()事件中登录/注销时，您可以处理任何逻辑.

• You can handle any logic when user Log in/Log out in the IsLogged_PropertyChanged() event.

如果您想要多个/特定或基于页面的角色，则始终可以创建/定义/设计您的角色，在绑定中使用它们，引发并使用其属性更改事件来执行操作.

If you want several/specific or page based roles you can always create/define/design yours, use them in bindings, raise and use their property changed event to execute actions.

AppShell.xaml

<Shell Shell.FlyoutBehavior="Disabled"..>
   <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab>
            <ShellContent Title="Login" Route="Login">
                <local:Login />
            </ShellContent>

            <ShellContent Title="Page2" Route="Page2"
                ContentTemplate="{DataTemplate local:Page2}"
                IsVisible="{Binding IsLogged}"/>

            <ShellContent Title="Page3" Route="Page3"
                ContentTemplate="{DataTemplate local:Page3}"/>
        </Tab>
    </FlyoutItem>

AppShell.xaml.cs

public bool IsLogged
{
    get => (bool)GetValue(IsLoggedProperty);
    set => SetValue(IsLoggedProperty, value);
}

public static readonly BindableProperty IsLoggedProperty =
    BindableProperty.Create("IsLogged", typeof(bool), typeof(AppShell), false, propertyChanged: IsLogged_PropertyChanged);

private static void IsLogged_PropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
//handle log in/log out event
    if ((bool) newValue)
       //user just logged in logic
    else
      //user just logged out logic
}

Login.xaml

<StackLayout>
    <Label
        FontSize="45"
        HorizontalOptions="FillAndExpand"
        Text="Login Page" />
    <Button Clicked="Button_Clicked" Text="Log In" />
</StackLayout>

Login.xaml.cs

private async void Button_Clicked(object sender, System.EventArgs e)
{
    IsVisible = false;                          //hide login page
    //Trigger the binding to show pages previously hidden
    (Shell.Current as AppShell).IsLogged = true;
    await Shell.Current.GoToAsync("//Page2");   //navigate to main page (next after log)
                                               //Enable the flyout: hamburger button
    Shell.Current.FlyoutBehavior = FlyoutBehavior.Flyout;  
}

---

与标签页相同

在此示例中，符号"底部选项卡对于上部选项卡"B"将不可见.属于底部标签字母"直到用户登录为止，其余的底部"标签将在最初显示.

---

Same thing with Tabs

In this example "Symbols" bottom tab won't be visible the same for upper tab "B" that belongs to bottom tab "Letters" until the user log-in, the remaining bottoms tabs will be visible initially.

AppShell.xaml

<TabBar>
    <ShellContent Title="Login" Route="Login">
        <local:Login />
    </ShellContent>

    <Tab Title="Letters">
        <ShellContent
            Title="A"
            ContentTemplate="{DataTemplate local:Page1}"
            Route="Page1" />

        <ShellContent
            Title="B"
            ContentTemplate="{DataTemplate local:Page2}"
            IsVisible="{Binding IsLogged}"
            Route="Page2" />

        <ShellContent
            Title="C"
            ContentTemplate="{DataTemplate local:Page3}"
            Route="Page3" />
    </Tab>

    <Tab Title="Digits">
        <ShellContent
            Title="100"
            ContentTemplate="{DataTemplate local:Page4}"
            Route="Page4" />
    </Tab>

    <Tab Title="Symbols" IsVisible="{Binding IsLogged}">
        <ShellContent
            Title="!"
            ContentTemplate="{DataTemplate local:Page5}"
            Route="Page5" />
    </Tab>
</TabBar>

这篇关于如何根据登录状态/角色来限制/控制用户可以访问的导航路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！