英文:
How can I implement logout in a .NET MAUI application that uses shell and tabs?
问题
在.NET MAUI Shell应用程序中，要使用户在注销时不再看到底部的选项卡，您可以使用以下方法：
- 在注销时，使用
Shell.Current.FlyoutIsPresented属性来隐藏选项卡：
private async Task OnLogout()
{
App.LoggedInUser = null;
Shell.Current.FlyoutIsPresented = false; // 隐藏选项卡
await Shell.Current.GoToAsync(nameof(LogInPage));
}
通过将FlyoutIsPresented属性设置为false，您可以在用户注销后隐藏底部选项卡。
- 在您的
LogInPage中，确保将Shell.TabBarIsVisible属性设置为false，以确保在登录页面上不显示底部选项卡。可以在LogInPage.xaml.cs中的构造函数中添加以下代码：
public LogInPage()
{
InitializeComponent();
Shell.SetTabBarIsVisible(this, false); // 在登录页面上隐藏底部选项卡
}
这两个步骤结合起来将使用户在注销后返回登录页面，而不会看到底部选项卡。
英文:
How can I gracefully allow the user to logout and send him to the login screen again in a .NET MAUI Shell Application?
This is my AppShell.xaml:
<Shell
x:Class="Xen.Presentation.Mobile.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Xen.Presentation.Mobile"
xmlns:views="clr-namespace:Xen.Presentation.Mobile.Views"
Shell.FlyoutBehavior="Disabled">
<ShellContent Title="LogIn" ContentTemplate="{DataTemplate views:LogInPage}" />
<TabBar Route="Main">
<Tab Title="Inicio" Icon="home.png">
<ShellContent Title="Home" ContentTemplate="{DataTemplate views:HomePage}" />
</Tab>
<!-- Other tabs -->
<Tab Title="Perfil" Icon="user.png">
<ShellContent Title="Perfil" ContentTemplate="{DataTemplate views:UserPage}" />
</Tab>
</TabBar>
<ShellContent Title="Professional" ContentTemplate="{DataTemplate views:ProfessionalPage}" />
<!-- Other pages -->
</Shell>
This is the login page when the user first opens the app:
On the LoginViewModel I have a SignInCommand that after authentication sends the user to the main TabBar:
private async void OnSignInCommand()
{
// Authentication and validations
// Go to the home page
await Shell.Current.GoToAsync("//Main");
}
I have on my UserViewModel a button where the user should be able to logout. This is the code the LogoutCommand calls:
private async Task OnLogout()
{
App.LoggedInUser = null;
await Shell.Current.GoToAsync(nameof(LogInPage));
}
This is the Login screen after I clear the user information and redirect to the login page. As you can see on the bottom of the page the tabs are still visible despite the fact that the LogInPage is registered outside of the TabBar in the Shell.xaml.
How can I implement this in a way that the user goes back to the login without the tabs being visible at the bottom?
答案1
得分: 3
在你的Shell XAML中，首先需要这样写：
<ShellItem Route="LoginPage">
<ShellContent ContentTemplate="{DataTemplate view:LoginPage}"/>
</ShellItem>
然后，你只需要调用：
await Shell.Current.GoToAsync($"//{nameof(LoginPage)}");
（通常在清除访问令牌后）
路由的Shell项无需注册，并且允许您使用"//"导航到它们。这会清除堆栈 - 这非常有用，因为您不希望用户能够在不经过登录过程的情况下返回。
编辑2：
删除您的随机行，比如：
<ShellContent Title="LogIn" ContentTemplate="{DataTemplate views:LogInPage}" />
或者：
Routing.RegisterRoute(nameof(LogInPage), typeof(LogInPage));
只需执行以下操作：
<ShellItem Route="LogInPage">
<ShellContent ContentTemplate="{DataTemplate view:LogInPage}"/>
</ShellItem>
英文:
First in your Shell XAML you need this:
<ShellItem Route="LoginPage">
<ShellContent ContentTemplate="{DataTemplate view:LoginPage}"/>
</ShellItem>
And then all you have to do is call:
await Shell.Current.GoToAsync($"//{nameof(LoginPage)}");
(Usually after clearing your access token)
Routed Shell items do not require registration. And allow you to navigate to them with "//". This clears the stack - very useful, because you do not want people to be able to go back, without going through login process.
Edit2:
Remove random lines you have like:
<ShellContent Title="LogIn" ContentTemplate="{DataTemplate views:LogInPage}" />
Or:
Routing.RegisterRoute(nameof(LogInPage), typeof(LogInPage));
And do just this:
<ShellItem Route="LogInPage">
<ShellContent ContentTemplate="{DataTemplate view:LogInPage}"/>
</ShellItem>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论