时间戳

首页 > 解决方案 > 在全局进入离子视图之前验证信息

angular - 在全局进入离子视图之前验证信息

问题描述

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

在此处输入图像描述

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

我该怎么做？我是新手，所以如果不是太麻烦，请尽量理解一下。

在 angular.js 中，他通过以下方式做到了：

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

标签： angularionic-frameworkionic2ionic3

解决方案

您可以做的是添加路线守卫。

您只需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

推荐阅读