I'm new to Observables. I'm using them to check if the user is logged in or not in the constructor of my root page.

I have nested many Observables in order to do this, and they are working fine, but I think that there is a way to flatten all of these nested Observables.

I just want you to review the code and let me know what could be improved, and if I can flatten these Observables in login-page.ts


export class LoginPage {
  constructor(public navCtrl: NavController, private userService: UserService, private storage: Storage) {
            data => {
                console.log('Token and username are stored.')
                this.userService.checkTokenValidity(data[0], data[1]).subscribe(
                    () => {
                        console.log('Token and username and valid.')
                        // Go to the homepage
                    }, err => {
                        console.log("Invalid token, trying the stored username and password.")
                        this.userService.getStoredUserAndPassFromStorage().subscribe(data => {
                            console.log('Successfuly retrieved the username and password')
                            this.userService.login(data[0], data[1]).subscribe((res) => {
                                console.log('Username and password are valid.')
                                // Go to the homepage
                                // Save new user data to local storage
                                this.userService.authSuccess(res.access_token, data[0], data[1])
                            }, err => {
                                console.log("Failed to login using the stored username and password.")
                                //Remove the loading and show login form
                        }, err => {
                            console.log("No stored token.")
                            //Remove the loading the and login form
            err => {
                //Remove the loading the show login form


export class UserService {
    loginDetails: ILogin
    headers: any
    error: string
    apiUrl = global.apiUrl
    loginUrl = api.loginUrl
    contentHeader: Headers = new Headers({'Content-Type': 'application/json'})
    constructor(public http: Http, private storage: Storage) {
    logout() {
    login(username: string, password: string): Observable<IAccessToken> {
        this.loginDetails = {
            client_id: global.clientId,
            client_secret: global.clientSecret,
            grant_type: 'password',
            username: username,
            password: password,
        let body = JSON.stringify(this.loginDetails)
        let options = new RequestOptions({headers: this.contentHeader})
        return this.http
                   .post(this.loginUrl, body, options)
                   .map(response => response.json())
    getStoredToken(): Observable<string[]> {
        return Observable.forkJoin(
    getStoredUserAndPassFromStorage(): Observable<string[]> {
        return Observable.forkJoin(
    checkTokenValidity(token: any, username: any): Observable<IAccessToken> {
        let params = new URLSearchParams()
        params.set('access_token', token)
        params.set('_format', 'json')
        return this.http.get(api.userInfoUrl(username), {
            search: params
        }).map(response => response.json())
    authSuccess(access_token, username, password) {
        this.error = null
        this.storage.set("_user", username)
        this.storage.set("_pass", password)
        this.storage.set("_token", access_token)


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.