對Spring Boot REST API進行身份驗證我的Ionic 3應用程序

Question

這個問題必須非常典型，但我無法真正找到一個好的比較。

我是Ionic新手& mobile dev。 我們有一個REST API（Spring Boot）。 API目前僅由AngularJS 1.5前端使用。 AngularJS應用程序基於標準的基於會話的驗證進行驗證。

我應該使用什麼來驗證離子3應用程序？ 據我所知，有2個選項：

1. 使用與角度前端相同的身份驗證。
2. 在後端實現oauth2並使用離子應用程序的標記。

至於現在，我明白了，在後臺執行的oauth2是一種與選項＃1，因爲去我應該存儲在本地存儲的用戶名&密碼（離子的應用程序），它是不是安全。否則，如果我不這樣做 - 用戶將不得不在每次啓動應用程序時進行身份驗證。我對嗎？

那麼，這讓我選擇＃2 - 在設備上存儲oauth2令牌？

Answer 1

最終的解決方案我做了：

離子應用：

實現類似Swapnil Patwa回答一個JWT令牌存儲。

彈簧後端：

試圖使用他們的原始ouath2包，但發現，如總是與彈簧/ JAVA，CONFIGS過於費時=>作了一個簡單的過濾器，其檢查手動生成的&分配了jwt令牌。

Answer 2

不錯，去＃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); 
    }) 

    }