Question

这个问题必须非常典型，但我无法找到一个好的比较。

我是Ionic＆amp; amp;的新手。移动开发我们有一个REST API（Spring Boot）。 API目前仅由AngularJS 1.5前端使用。 AngularJS应用程序基于标准的基于会话的身份验证进行身份验证。

我应该使用什么来验证离子3应用？据我了解，有两个选择：

使用与Angular前端相同的身份验证。
在后端实现oauth2并使用离子应用程序的令牌。

至于现在，我知道在后端实现oauth2是一种方法，因为使用选项＃1我应该存储用户名＆amp;本地存储（离子应用程序）中的密码，这是不安全的。否则，如果我不这样做 - 用户每次启动应用程序时都必须进行身份验证。我是对的吗？

那么，这让我选择＃2 - 在设备上存储oauth2令牌？

Answer 1

很高兴与＃2一起去。以下是我管理令牌的方法。我使用离子存储来存储令牌和在运行时保存令牌的提供者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);
    })

  }

Answer 2

我做出的最终解决方案：

离子应用

实现了类似于Swapnil Patwa回答的jwt令牌存储。

Spring back-end：

尝试使用他们原来的ouath2包，但发现与spring / java一样，配置太耗时了=＆gt;做了一个简单的过滤器，检查手动生成的＆amp;分配了jwt令牌。

针对Spring Boot REST API

2 个答案: