如何根据登录状态/角色限制/控制用户可以访问的导航路线？

Question

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

Answer 1

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

默认情况下，Shell 最初总是显示 中定义的第一个元素AppShell.xaml，在本例中它将是Login.xamlpage。

在下面的示例中，“Page3”最初是可见的，因为默认情况下 ( )，而“Page2”仅在可绑定属性为 时才Isvisible=true可见。IsLoggedtrue

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

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

使用弹出项目

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
}

登录.xaml

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

登录.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”将不可见，直到用户登录为止，其余底部选项卡最初将可见。

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>

编辑

您可能还想在登录页面中添加Shell.NavBarIsVisible="False"和（在选项卡栏情况下）以分别隐藏导航栏和隐藏底部选项卡栏。Shell.TabBarIsVisible="false"