针对 Spring Boot REST API 对我的 Ionic 3 应用程序进行身份验证答案

【问题标题】：Authenticating my Ionic 3 app against Spring Boot REST API针对 Spring Boot REST API 对我的 Ionic 3 应用程序进行身份验证
【发布时间】：2017-12-24 13:25:12
【问题描述】：

这个问题一定很典型，但我真的找不到很好的比较。

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

我应该使用什么来验证 ionic 3 应用程序？据我了解，有两种选择：

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

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

那么，剩下的选项 #2 - 在设备上存储 oauth2 令牌？

【问题讨论】：

标签： spring ionic-framework ionic2 ionic3

【解决方案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);
    })

  }

【讨论】：

谢谢。 this.shared 是什么？
另外，你的意思是你用这个ionicframework.com/docs/storage 来存储？
通用功能的提供者，如加载器、警报、吐司等。检查我对这个问题的回答 - stackoverflow.com/questions/45143978/…
this.shared.LS 其中 LS 是本地存储。问我是否需要 LS 可重用方法。否则，您也可以使用文档。
我大概明白了，谢谢。会试试的。对我来说，关键问题实际上是决定在后端设置 oauth2 还是使用基于会话的身份验证并在用户设备上存储 user:pass。

【解决方案2】：

我做出的最终解决方案：

离子应用：

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

Spring 后端：

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

【讨论】：

太棒了。接受答案以完成问题。