Question

我想为用户构建一个登录系统到我的{N} -App。成功登录后，我收到了执行请求所需的令牌。目前我通过application-settings模块存储了这个。现在我希望UI在＆＃34; Login-Screen＆＃34;之间切换。和＆＃34;个人信息＆＃34;用户登录时的屏幕。用户可以在未登录时使用应用程序的某些功能，因此登录只是侧栏上的选项卡。

因此，从我的观点来看，路由必须更改为另一个组件（我必须在应用程序打开时检查）或者我可以根据是否保存用户令牌来更改组件覆盖。有可能这样做吗？（我必须在我的.ts文件中的组件注释中定义某些东西，所以最简单的方法是操作这个。）

我在路由中定义了一次选项卡的名称，在路由目录中定义了一次，所以我认为我必须修改我的路由。

我的想法：

//router definition
path: "Main", component: MainPage, children: [
    (appSettings.getBoolean("isLoggedIn") == true) ?
        {path:  "Login", component: LoginPage} : 
        {path: "My Account", component: LoginPage}
    ]

哪个（当然）不起作用。还有其他方法吗？

编辑：

我可能没有很好地描述我的问题：我有一个带侧边栏的应用程序。在侧边栏上是一个＆＃34;登录＆＃34; -Label。每当用户想要登录时，他只需点击它并输入他的凭证即可。当用户登录时，我希望这个＆＃34;登录＆＃34; -Label消失，而是做＆＃34; Account＆＃34;之类的东西，在那里他可以看到他的个人信息。他没有访问应用程序新页面的任何权限。所以我想要的是改变侧边栏和特定页面的叠加。

Answer 1

我们使用angular $join = caseitems::join('itemprices','caseitems.weaponid','=','itemprices.weaponid')=>where('caseitems.type.id','=','itemprice.type';)实现了类似的功能。你可以找到一个很好的答案here

基本上你用这样的东西配置auth guard：

auth guard

在您的路由器配置中，您可以按如下方式使用它：

@Injectable()

export class AuthGuard implements CanActivate {

    auth: any = {};

    constructor(private authService: AuthService, private router: Router) {

    }

    canActivate() {
        if (/*user is logged in*/) {
            this.router.navigate(['/dashboard']);
            return true;
        }
        else {
            this.router.navigate(['/login']);
        }
        return false;
    }
}

编辑后

如果我正确理解你的问题，你需要做一些更简单的事情。基本上你可以使用const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: AppKeys.Paths.login, loadChildren: () => require(AppKeys.Paths.loginModule)['LoginModule'], canLoad: [AuthGuard]} ];指令和listview项中的一些条件文本......如下所示：

routerLink

在组件中，您将拥有<Button text="{{ isLoggedin ? 'login' : 'personal info' }}" [nsRouterLink]="[isLoggedin? '/login' : '/personalinfo' ]"></Button>变量，该变量使用isLoggedin中存储的任何值进行初始化。

我没有测试过代码，你需要调整它（不是按钮，而是listview项目，路径等），但这背后是一般的想法：）

在NativeScript应用程序中保存用户令牌的最佳方法

1 个答案: