在 android 和 iOS 上使用 Angular 在 nativescript 中处理注销

Question

我是 NativeScript 和 Angular 的新手，因此我感谢任何帮助/指导。我正在运行 Angular 8.2.14 和 nativescript 6.2.2。

我正在开发一款适用于 iOS 和 Android 的应用程序，该应用程序本质上会在用户登录后提供精选的任务列表和其他一些基本信息。

当应用启动时，用户会看到一个登录组件。用户通过身份验证后，用户名、令牌和过期时间戳将使用 nativescript-secure-storage 插件保存。我正在存储用户名和令牌，以便用户下次启动应用时不必再次登录。

然后用户通过this.router.navigateByUrl("/dashboard"); 被路由到仪表板。

我按照 nativescript 文档中的示例将仪表板上的操作栏中的“返回”导航按钮替换为调用函数的注销按钮。这在 iOS 中完美运行。用户点击注销按钮，我清除存储在安全存储中的用户名和安全令牌。

问题在于，在 Android 中，用户有一个后退按钮，而且<actionItem> 标签实际上并没有出现在操作栏中。

LoginComponent的本质是：

export class LoginComponent implements OnInit {
    secureStorage = new SecureStorage();
    constructor(private router: Router, private userService: UserService) {
        this.user = new User();
    }
    ngOnInit() {
        // Check to see if user has a saved session
        var sessionUser = this.userService.checkSavedSession();
        if (sessionUser.expires > now) {
            this.router.navigateByUrl("/dashboard");
        }
    }
    login() {
        // Called when user taps submit on login view
        this.userService.login(this.user)
            .subscribe(
                // If user authed store the session
                this.secureStorage.set({
                    key: "appSession",
                    value: JSON.stringify({
                        uid: resp.uid,
                        expires: resp.exp,
                        token: resp.token
                    })
                });
                // Go to the dashboard
                this.router.navigateByUrl("/dashboard");
            );
    }
}

仪表板视图：

<ActionBar title="Dashboard" class="action-bar">
    <navigationButton text="Log Out" ios:visibility="collapsed" (tap)="logout()"></navigationButton>
    <actionItem text="Log Out" android:visibility="collapsed" (tap)="logout()"></actionItem>
</ActionBar>
<AbsoluteLayout><!-- View content --></AbsoluteLayout>

仪表板组件包含一个注销功能，用于清除安全存储并将用户返回登录。

logout() {
    this.secureStorage.removeAll().then(success => console.log("Cleared storage");
    this.location.back();
}

我尝试订阅导航事件和位置事件，以查看是否可以检测到用户在仪表板上点击了返回按钮。我可以检测到它正在发生，但我也想通知用户他们即将注销并给他们一个改变主意的机会，因为他们实际上并没有点击注销按钮。我似乎无法弄清楚那部分。

任何帮助将不胜感激。

Answer 1

从登录导航到仪表板时，您可以清除历史记录。如果你这样做了，点击返回按钮将关闭应用程序，而不是让用户重新登录。

您还必须使用RouterExtensions 而不是 Angular 的路由器。

this.routerExtensions.navigateByUrl("/dashboard", {clearHistory: true});

您也可以监听返回按钮 (activityBackPressed) 事件，必要时覆盖默认行为。在Application Lifecycle docs 了解更多信息。

注意：我假设您不想通过后退按钮注销用户，如果您愿意，那么您可能宁愿将令牌存储在变量中而不是使用安全存储。安全存储通常用于在应用重新启动后保持用户登录状态。