NET MAUI中如何根据JWT存在与否设置Shell初始加载页面

核心逻辑是：启动时检查本地存储的JWT令牌是否存在，据此决定初始导航页面，并调整FlyoutItem的可见性（控制登录/注册页与主功能页的显示状态）。以下分两种配置方式实现：

方式一：基于XAML配置FlyoutItem #

先在XAML中定义所有FlyoutItem，再在后台代码中根据JWT状态动态调整可见性与初始导航。

修改后的XAML代码 #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:MauiUI.Pages"
    FlyoutHeaderBehavior="CollapseOnScroll"
    Shell.FlyoutBehavior="Flyout">

    <!-- 登录/注册组：默认隐藏，未登录时显示 -->
    <FlyoutItem x:Name="AuthFlyout" IsVisible="False">
        <ShellContent
            Title="登录"
            Route="login"
            ContentTemplate="{DataTemplate pages:LoginPage}" />
        <ShellContent
            Title="注册"
            Route="register"
            ContentTemplate="{DataTemplate pages:RegisterPage}" />
    </FlyoutItem>

    <!-- 主功能组：默认显示，登录后可见 -->
    <FlyoutItem x:Name="MainFlyout" IsVisible="True">
        <ShellContent
            Title="排球名将"
            Route="main"
            ContentTemplate="{DataTemplate pages:MainPage}" />
        <ShellContent
            Title="详情"
            Route="details"
            ContentTemplate="{DataTemplate pages:PlayerDetailsPage}" />
        <ShellContent
            Title="添加新名将"
            Route="add-or-update"
            ContentTemplate="{DataTemplate pages:AddOrUpdatePlayer}" />
    </FlyoutItem>

</Shell>

后台C#逻辑 #

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        
        // 从本地读取JWT令牌
        string jwtToken = Preferences.Get("JwtToken", string.Empty);
        
        if (string.IsNullOrEmpty(jwtToken))
        {
            // 未登录状态：显示登录注册项，隐藏主功能项，跳转登录页
            AuthFlyout.IsVisible = true;
            MainFlyout.IsVisible = false;
            _ = GoToAsync("//login");
        }
        else
        {
            // 已登录状态：隐藏登录注册项，显示主功能项，跳转主页
            AuthFlyout.IsVisible = false;
            MainFlyout.IsVisible = true;
            _ = GoToAsync("//main");
        }
    }
}

方式二：基于C#代码动态创建FlyoutItem #

完全通过代码构建FlyoutItem，根据JWT状态决定添加哪些导航项。

C#代码实现 #

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        
        string jwtToken = Preferences.Get("JwtToken", string.Empty);
        
        // 构建登录注册导航组
        FlyoutItem authFlyout = new FlyoutItem
        {
            FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
            Items = 
            {
                new ShellContent { Title = "登录", Content = new LoginPage(), Route = "login" },
                new ShellContent { Title = "注册", Content = new RegisterPage(), Route = "register" }
            }
        };
        
        // 构建主功能导航组
        FlyoutItem mainFlyout = new FlyoutItem
        {
            FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
            Items = 
            {
                new ShellContent { Title = "排球名将", Content = new MainPage(), Route = "main" },
                new ShellContent { Title = "详情", Content = new PlayerDetailsPage(), Route = "details" },
                new ShellContent { Title = "添加新名将", Content = new AddOrUpdatePlayer(), Route = "add-or-update" }
            }
        };
        
        if (string.IsNullOrEmpty(jwtToken))
        {
            // 未登录：添加登录组，跳转登录页
            Items.Add(authFlyout);
            _ = GoToAsync("//login");
        }
        else
        {
            // 已登录：添加主功能组，跳转主页
            Items.Add(mainFlyout);
            _ = GoToAsync("//main");
        }
    }
}

补充说明 #

1. JWT存储与管理：
   • 登录成功后保存令牌：Preferences.Set("JwtToken", "后端返回的JWT字符串");
   • 退出登录时清除令牌：Preferences.Remove("JwtToken");，之后需重新导航到登录页并更新Flyout状态。
2. 路由注意事项：使用GoToAsync("//路由名称")跳转到根级页面，确保导航层级正确。

内容的提问来源于stack exchange，提问作者Wasyster