Question

我有一个Ionic 2应用程序。

登录工作完美并重定向到其他页面，但信息无法加载，在控制台上我看到401错误。

重定向后的图片：

Image after redirect

当我重新加载浏览器数据时

重装后的图片：

Image after reload

loginForm(){
const data = {
  "username" : this.login.value.username,
  "email" : this.login.value.username,
  "password" : this.login.value.password,
}
this.dataService.loginUser(data).subscribe(
    (data) => {
      let token = data.key;
      this.dataService.checkAccessUserGroup(token).subscribe(
        (data) => {
          if(data[0] == 200){
            this.storage.set('access_token', token);
            //location.reload();
            this.appCtrl.getRootNav().setRoot(IndexPage);
          }
          if(data[0] == 500){
            this.generateAlert("Error",'No tienes permisos adecuados para acceder. Ponte en contacto con el administrador de tu Deck.');
          }
        },
        (err) => {
          if(err.status == 400){
            this.generateAlert("Error",'No hemos podido verificar tus datos. Intentalo de nuevo');
          }
        }
      );
    },
    (err) => {
      if(err.status == 400){
        this.generateAlert("Error",'Usuario o constraseña no válido. Intentalo de nuevo');
      }
    }
  );
}

我该如何解决这个问题？

Answer 1

因为storage是异步的，重定向应该在set的回调中。但是，分享一种更好的方法来处理令牌。

我使用离子存储来存储令牌和在运行时保存令牌的提供者config.ts。

<强> config.ts

import { Injectable } from '@angular/core';  
@Injectable()
export class TokenProvider { 
    public token: any;
    public user: any = {}; 

  constructor(  ) { }
  setAuthData (data) { 
    this.token = data.token; 
    this.user = data
  }
  dropAuthData () {
    this.token = null;
    this.user = null;
  }
}

<强> auth.ts

import { TokenProvider} from '../../providers/config';

constructor(public tokenProvider: TokenProvider) { }

login() {
      this.api.authUser(this.login).subscribe(data => {
        this.shared.Loader.hide(); 
          this.shared.LS.set('user', data); 
          this.tokenProvider.setAuthData(data); 
          this.navCtrl.setRoot(TabsPage); 
      }, err => {
        console.log(err);
        this.submitted = false;
        this.shared.Loader.hide();
        this.shared.Toast.show('Invalid Username or Password');
        this.login.password = null;
      });
}

我会在应用启动时进行检查。 app.component.ts （在构造函数中）

shared.LS.get('user').then((data: any) => {
      if (!data) {
        this.rootPage = AuthPage;
      } else {
        tokenProvider.setAuthData(data);
        this.rootPage = TabsPage;
      } 
    });

<强> api.provider.ts

  updateUser(data): Observable < any > {
        let headers = new Headers({
            'Content-Type': 'application/json',
            'X-AUTH-TOKEN': (this.tokenProvider.token)
        });
    return this.http.post(`${baseUrl}/updateUser`, JSON.stringify(data), {
            headers: headers
        })
        .map((response: Response) => {
            return response.json();
        })
        .catch(this.handleError);
}

最后 logout.ts

  logOut(): void {
    this.shared.Alert.confirm('Do you want to logout?').then((data) => {
      this.shared.LS.remove('user').then(() => {
        this.tokenProvider.dropAuthData();
        this.app.getRootNav().setRoot(AuthPage);
      }, () => {
        this.shared.Toast.show('Oops! something went wrong.');
      });
    }, err => {
      console.log(err);
    })

  }

Http服务响应抛出401直到重新加载app Ionic2

1 个答案: