在全球进入离子视图之前验证信息

Question

我已经看到IONIC的官方文档提供了这些方法来验证视图的访问或退出。

但这是在每个视图中完成的，我想知道是否有一种方法或方法可以全局执行此操作，以便不通过视觉进行查看。例如，我想全局验证而不向任何组件注入任何内容，如果localstorage中有令牌将我重定向到第一个屏幕，否则它将允许我继续在当前视图中。

我该怎么办？我是新手，所以如果不是太麻烦，请尝试稍微了解一下。

在angular.js中，他按照以下方式做到了：

$transitions.onStart({}, trans => {});

Answer 1

你可以做的是增加路线防护。

您只需在要保护的路线上添加canActivate属性。

看看这个示例服务：

// src/app/auth/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

该服务会注入AuthService和Router，并且只有一个名为canActivate的方法。此方法是正确实现CanActivate接口所必需的。

canActivate方法返回一个布尔值，指示是否应允许导航到路径。如果用户未经过身份验证，则会将其重新路由到其他位置，在本例中为/login的路由。

在您有路线的文件中：

export const ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard] 
  }
];

如您所见，个人资料页面具有canActivate属性。您只需将其添加到要保护的路由中即可。

完全实施在这里https://medium.com/@ryanchenkie_40935/angular-authentication-using-route-guards-bf7a4ca13ae3