I have 2 issues regarding to capacitor storage plugin:
1- I am using capacitor storage plugin to save my users data such as login data but each time I update my app from play store they will be logged out.
2- When user Log In, user data will not appear in ion-split-pane
and it requires me to close and reopen application. (login code shared at the bottom of this question).
Code
app.component.ts
public user: User;
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.authenticationService.getToken(); // <--
});
}
async ngOnInit() {
(await this.authenticationService.user()).subscribe( // <--
(user: any) => {
this.user = user;
this.router.navigate(['members', 'dashboard']);
},
(error: any) => {
this.router.navigate(['/login']);
},
() => {
//
}
);
}
authentication.service.ts
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { EnvService } from './env.service';
import { User } from './user.service';
import { tap, map } from 'rxjs/operators';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;
import { ElectronService } from 'ngx-electron';
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
public isLoggedIn = false;
token: any;
constructor(
private plt: Platform,
private http: HttpClient,
private nativeStorage: NativeStorage,
private env: EnvService,
private electronService: ElectronService,
) { }
login(email: string, password: string) {
return this.http.post(this.env.AUTH_URL + '/login',
{ email, password }
).pipe(
tap(async token => {
await Storage.set({
key: 'token',
value: JSON.stringify(token)
}).then(
() => {
console.log('Token Stored');
},
error => console.error('Error storing item', error)
);
this.token = token;
this.isLoggedIn = true;
return token;
}),
);
}
reset(email: string) {
return this.http.post(this.env.AUTH_URL + '/reset-password',
{ email }
).pipe(
tap(data => {
return data;
}),
);
}
update(
name: string,
username: string,
email: string,
password: string,
phone: string,
avatar: string
) {
const headers = new HttpHeaders({
Accept: 'application/json, text/plain',
'Content-Type': 'application/json',
Authorization: this.token.access_token
});
return this.http.post(this.env.AUTH_URL + '/updateUser',
{
name,
username,
email,
password,
phone,
avatar
}, { headers }
);
}
logout() {
const headers = new HttpHeaders({
Accept: 'application/json',
Authorization: this.token.access_token // JSON.parse(this.token.value.access_token)
});
return this.http.get(this.env.AUTH_URL + '/logout', {headers})
.pipe(
tap(data => {
Storage.remove({ key: 'token' });
this.isLoggedIn = false;
delete this.token;
return data;
})
);
}
async user() {
if (this.token === undefined) {
await Storage.get({ key: 'token' }).then((token: any) => {
this.token = JSON.parse(token.value)
}).catch(error => console.error(error));
}
const headers = new HttpHeaders({
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: this.token.access_token
});
return this.http.post<User>(this.env.AUTH_URL + '/user', null, { headers })
.pipe(
tap(user => {
return user;
})
);
}
async getToken(): Promise<any> {
try {
const data = await Storage.get({ key: 'token' });
this.token = JSON.parse(data.value);
if (this.token != null) {
this.isLoggedIn = true;
} else {
this.isLoggedIn = false;
}
} catch (error) {
this.token = null;
this.isLoggedIn = false;
}
}
}
user.service.ts
import { Injectable } from '@angular/core';
export class User {
id: number;
name: string;
username: string;
email: string;
type: string;
}
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor() { }
}
login.page.ts
login() {
const user = this.user.value;
this.authService.login(user.email, user.password).subscribe(
(data: any) => {
this.menu.enable(true);
this.alertService.presentToast(data.message);
this.router.navigate(['members', 'dashboard']);
},
error => {
this.alertService.presentToast(error.statusText);
},
() => {
this.menu.enable(true);
this.router.navigate(['members', 'dashboard']);
}
);
}