Ionic 3 未经身份验证的用户重定向答案

【问题标题】：Ionic 3 unauthenticated user redirectIonic 3 未经身份验证的用户重定向
【发布时间】：2017-11-23 12:45:59
【问题描述】：

我是第一次使用 Ionic，我正在尝试将未经身份验证的用户重定向到我的登录页面。

在登录时，用户会获得一个存储在本地存储中的 json-web-token。我还有一个身份验证服务，它有一个loggedIn() 方法来检查令牌是否有效。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { Storage } from '@ionic/storage';


@Injectable()
export class AuthServiceProvider {

constructor(
  public http: HttpClient,
  public store: Storage,
 ) { }

 ...

 public loggedIn(): boolean {
   return tokenNotExpired('__local/_ionickv/token');
 }

 ...

}

在我的HomePage 组件中，然后在加载页面之前检查用户是否使用ionViewCanEnter() 登录。

import { Storage } from '@ionic/storage';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginPage } from './../login/login';
import { AuthServiceProvider } from './../../providers/auth-service/auth-service';

@IonicPage({
name: 'home',
})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

constructor(
  public navCtrl: NavController, 
  public navParams: NavParams,
  public auth: AuthServiceProvider,
  public store: Storage,
) { }

ionViewCanEnter(): boolean {
  if(!this.auth.loggedIn()){
    this.navCtrl.setRoot(LoginPage);
  }
  return this.auth.loggedIn();
}

public logout(): void {
  this.auth.logout();
  this.navCtrl.setRoot(LoginPage);
}

}

当我尝试在没有登录的情况下进入会员区时，页面没有加载，这很好。不幸的是，我没有被重定向，我被留在了一个空白页面上。

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0
@ionic/app-scripts : 3.1.0
Ionic Framework    : ionic-angular 3.9.2
Node : v8.9.1
npm  : 5.5.1 
OS   : Linux 4.10

【问题讨论】：

标签： redirect login ionic3

【解决方案1】：

这是一种离子问题

作为目前的解决方法，我必须在 setTimeout 中包装重定向

ionViewCanEnter(){
    if(!this.authService.authenticated){
      setTimeout(()=>this.navCtrl.setRoot('login'))
    }
    return this.authService.authenticated
  }

【讨论】：

感谢这为我节省了很多时间来解决这个问题