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

Question

我是 NativeScript 和 Angular 的新手，所以我很感激 assistance/guidance。我是运行 Angular 8.2.14 和 nativescript 6.2.2.

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

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

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

我按照 nativescript 文档中的示例将仪表板上操作栏中的 'back' 导航按钮替换为调用函数的注销按钮。这在 iOS 中非常有效。用户点击注销按钮，我清除存储在安全存储中的用户名和安全令牌。

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

登录组件的本质是：

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>

仪表板组件包含注销功能，可清除安全存储并returns 用户登录。

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 文档中了解更多信息。

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

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

Handling a logout in nativescript with angular on both android and iOS

nativescript

angular2-nativescript

nativescript-angular

angular