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

时间:2017-11-23 12:45:59

标签: redirect login ionic3

我第一次使用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

1 个答案:

答案 0 :(得分:7)

这是一种离子问题

作为解决方法,目前我必须在setTimeout

中包装重定向
ionViewCanEnter(){
    if(!this.authService.authenticated){
      setTimeout(()=>this.navCtrl.setRoot('login'))
    }
    return this.authService.authenticated
  }