根据Spring Boot REST API验证我的Ionic 3应用程序

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

我是爱奥尼亚移动开发公司的新手。 我们有一个restapi（springboot）。 API目前仅由AngularJS 1.5前端使用。 AngularJS应用程序基于标准的基于会话的身份验证进行身份验证

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

使用与角度前端相同的身份验证

在后端实现oauth2，并为ionic应用程序使用令牌

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

因此，这就给了我一个选项#2-在设备上存储oauth2令牌？

使用#2很好。下面是我如何管理令牌的。 我使用ionic存储来存储令牌和一个provider 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;
  }
}

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;
      });
}

  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(): 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);
    })

  }

auth.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;
  }
}

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;
      });
}

  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(): 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);
    })

  }

当应用程序启动时，我会做一个检查。 应用程序组件.ts（在构造函数中）

api.provider.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;
  }
}

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;
      });
}

  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(): 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);
    })

  }

---

我提出的最终解决方案是：

爱奥尼亚应用程序：

实现了类似于

Swapnil Patwa

answer的jwt令牌存储

弹簧后端：

---

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

谢谢。这是什么？共享的？另外，您的意思是将其用于存储吗？提供常用功能，如加载程序、警报、toast和其他。检查我对这个问题的回答-

this.shared.LS

其中LS是本地存储。问我是否需要LS可重用方法。否则你也可以和医生一起去。我可能明白了，谢谢。我试试看。对我来说，关键问题实际上是决定在后端设置oauth2，还是使用基于会话的身份验证并存储user:pass-on-user's device.Great。接受答案以完成问题。