NativeScript Angular 应用中的安全访问

Question

我开始学习 NativeScript Angular（我习惯于使用 Angular 开发 webapp/websites）但我仍然对如何创建一些受限访问感到困惑在 NativeScript 应用程序上，或限制特定路由 and/or 组路由。

例如，在Angular中我使用uiRouter来定义一些数据，像这样：

data: {
    requireLogin: true
}

在每次页面转换中，我都会检查是否有有效令牌来保证该用户的访问权限。在 NativeScript 上，我正在考虑它并且可以做同样的事情，我只是不知道，因为我对 NativeScript 很陌生，我不知道这是否会违背任何最佳实践或常见安全场景。

例如，我将在登录之后在 Application Settings 上设置令牌，如下所示：

submit() {
    // process the login here
    if ( success ) {
        setString(AppSettings.authToken, authToken );
    }
}

然后我会将路由设置为具有父组件的父路由，我将在其中检查此令牌，例如：

export class ParentComponent implements OnInit {
    constructor() {}

    ngOnInit() {
        if ( !getString(AppSettings.authToken)) {
            return this.router.navigate(["/login"]);
        }
    }
}

这样我会检查用户在受限区域访问应用程序时是否有有效会话。

但是，例如，在正常的 Angular 应用程序中，我还使用拦截器，检查每个 http 请求是否 authToken 仍然有效。

这种情况我该怎么办？

我试图在 NativeScript Angular 安全性上找到任何 material，但没有找到。有什么地方可以让我了解更多相关信息吗？

遇到这种情况应该注意什么？

Answer 1

您可以使用 Angular 的 route guards

NativeScript 中 canActivate 路由保护的基本示例

class AuthGuard implements CanActivate {
    constructor(
        private loginService: LoginService,
        private nav: RouterExtensions) {
    }

    canActivate() {
        if (this.loginService.isLogged) {
            console.log("AuthGuard: authenticated");
            return true;
        } else {
            console.log("AuthGuard: redirecting to login");
            this.nav.navigate(["/login"]);
            return false;
        }
    }
}

基于此test application

The same deal in a real demo application. Here 是这个守卫在 Sample-Groceries 应用程序中的实际用法。

NativeScript Angular 应用中的安全访问

Security access in NativeScript Angular app

security

nativescript

nativescript-angular

angular