почему ионный / угловой отказывается аутентифицироваться?

Question

Я создал приложение для аутентификации, которое получает информацию о пользователе и токен (jwt) с сервера.Я храню данные локально, а затем использую их для дополнительных вычислений в приложении.для охранника маршрута, если токен доступен, он должен перейти на приборную панель, иначе вернуться назад, чтобы войти в систему.

это моя авторизация, и я вызываю метод loggedIn

import { HttpClient } from "@angular/common/http"
import { Router } from '@angular/router'
import { Storage } from '@ionic/storage';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private _registerUrl = "http://localhost:3000/api/register"
  private _loginUrl = "http://localhost:3000/api/login"
  constructor(private http: HttpClient, private _router:Router,private storage: Storage) { }
  registerUser(user){
    return this.http.post<any>(this._registerUrl,user)
  }

loginUser(user){
 return this.http.post<any>(this._loginUrl,user)
}

loggedIn(){
  return !!this.storage.get('token')
}

getToken(){
  return this.storage.get('token')
}

logoutUser(){
  this.storage.remove('token')
  this.storage.remove('user')
 this._router.navigate(['/login'])

}
}

файл маршрутизации

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DashboardPage } from './dashboard/dashboard.page';
import {HomePage } from './dashboardComponents/home/home.page'
import {MessagesPage } from './dashboardComponents/messages/messages.page'
import {PaymentsPage } from './dashboardComponents/payments/payments.page'
import {PostedJPage } from './dashboardComponents/posted-j/posted-j.page'
import {ProfileEditPage } from './dashboardComponents/profile-edit/profile-edit.page'
import {PostPage } from './dashboardComponents/post/post.page'
import {SettingsPage} from './dashboardComponents/settings/settings.page'
import { PasswordResetPage } from './password-reset/password-reset.page'
import { JobCompletedPage } from './dashboardComponents/job-completed/job-completed.page'
import { AppliedJobsPage} from './dashboardComponents/applied-jobs/applied-jobs.page'
import { AuthGuard } from './auth.guard'
const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
  { path: 'password-reset', component:PasswordResetPage, pathMatch:'full' },
  { path:'dashboard', redirectTo:'dashboard/home/1000}'},
  { path:'dashboard', component: DashboardPage,canActivate: [AuthGuard],
  children: [
    { path: 'messages', component:MessagesPage , pathMatch:'full'},
  { path: 'home/:distance', component: HomePage , pathMatch:'full'},
  { path: 'payments', component:PaymentsPage , pathMatch:'full'},
  { path: 'post', component:PostPage ,pathMatch:'full'},
  { path: 'settings', component: SettingsPage, pathMatch:'full' },
  { path: 'profile-edit', component: ProfileEditPage, pathMatch:'full' },
  {path:'posted', component:PostedJPage,pathMatch:'full'},
  {path:'job-completed', component:JobCompletedPage, pathMatch:'full' },
  {path:'applied-jobs',component:AppliedJobsPage,pathMatch:"full"}
  ]
}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const components = [
  HomePage,
  MessagesPage,
  PaymentsPage,
  PostedJPage,
  ProfileEditPage,
  DashboardPage,
  PostPage,
  SettingsPage,
  PasswordResetPage,
  JobCompletedPage,
  AppliedJobsPage
];

файл защиты

import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree,CanActivate,Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService} from './auth.service'
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

constructor(private _authService: AuthService, private _router:Router){

}

canActivate(): boolean {
   if(this._authService.loggedIn()){
     return true
   } else {
     this._router.navigate(['/login'])
      return false  
   }
 }

}

Я используюионное хранилище, так как я в конечном итоге запустит его в PlayStore.Независимо от того, есть токен или нет, он все равно переходит на страницу панели управления, хотя у меня есть на нем охрана.

Answer 1

Попробуйте:

измените метод LoggedIn для возврата обещания (удалить !!)

loggedIn() {
    return this.storage.get('token').then((token)=>{
      if (token) {
        console.log("token true")
        return true
      } else {
        console.log("token false")
        return false
      }
    })
  };

измените CanActivate следующим образом:

async canActivate(): Promise<boolean> {
    if(await this.auth.loggedIn()){
      return true
    } else {
      this._router.navigate(['/login'])
      return false  
    };
  };