Блог

Я хочу использовать охрану, чтобы решить, может ли пользователь перейти на страницу входа в систему, но я знаю, что моя логика ошибочна из-за а Promise . Смотрите мой код ниже.

   canActivate(): boolean | Observable<boolean> | Promise<boolean> {
    if (!this.localStorage.getObject('isInitialized')) {
      this.router.navigate(['/locaties']);
      return true;
    }
    return false;
  }
 

Я знаю, что делаю неправильно, но мне не хватает знаний об обещаниях обойти это. Что мне нужно сделать, чтобы это сработало?

Это мой localstorage.getObject() :

   // Returns object
  async getObject(key: string) {
    const ret = await Storage.get({ key: key });
    return JSON.parse(ret.value);
  }
 

Если вы хотите использовать условие на основе асинхронного результата в своем методе активации can, вы можете использовать Promise. Если вы собираетесь использовать прямое значение из локального хранилища, вам не нужно использовать promise. Вы можете сделать что-то вроде приведенного ниже, чтобы использовать обещание…

   canActivate(): boolean | Observable<boolean> | Promise<boolean> {
    return new Promise(() => {
    if (!this.localStorage.getObject('isInitialized')) {
      this.router.navigate(['/locaties']);
      // Do not allow the route
      resolve(false);
    } else {
      // Allow the route
      resolve(true);
     }
    
    });
  }
 

Итак, здесь есть пара неправильных вещей, но я не думаю, что обещание-одна из них. Подпись вашей функции говорит о том, что у вас есть возможность возвращать один из трех типов,

 canActivate(): boolean | Observable<boolean> | Promise<boolean>
 

Но вы всегда возвращаете только логическое значение, так что на самом деле вы могли бы переписать это как просто,

 canActivate(): boolean
 

Но проблема не в этом. Трудно сказать, не видя настройки вашего маршрута, но похоже, что вы перенаправляете пользователя, если маршрут, который они запрашивают, разрешен, и в этом нет необходимости. Защита маршрута запускается, когда пользователь уже пытается перейти на страницу. Если защита маршрута возвращает значение true, эта навигация разрешена, и пользователь перейдет на любую страницу, которую защищает защита маршрута.

Но вы должны указать страницу повторного направления, когда охранник маршрута возвращает false. Другими словами, когда пользователь не может получить доступ к странице за защитой, куда вы хотите их отправить?

В общем, это выглядело бы примерно так,

 @Injectable()
export class AuthGuard implements CanActivate {
    constructor(private router: Router) {}

    canActivate(state: RouterStateSnapshot): boolean {
        if (!this.localStorage.getObject('isInitialized')) {
            //No need to route here, user will be taken to the route they were trying access
            return true;
        } else {
            //Send the user back to the '/anotherpage' path if they are not logged in
            this.router.navigate(['/anotherpage']);
            return false;
        }
    }
}
 

Затем определите свои маршруты где-нибудь так,

 export const appRoutes: Routes = [
    {
        path: 'pageProtectedByAuthGuard',
        component: YourComponent,
        canActivate: [AuthGuard]
    }
];
 

Затем в вашем модуле вам нужно импортировать эти маршруты,

 @NgModule({
    imports: [RouterModule.forRoot(appRoutes, { enableTracing: false })],
    ...
})
 

Подробнее о canActivate здесь: https://angular.io/api/router/CanActivate

Ответ был таков:

     this.localStorage.getObject('isInitialized').then((res) => {
      if (res == true) {
        this.router.navigate(['/locaties']);
        return false;
      }
    });
    return true;
  }
 

Нужно помнить, что защита аутентификации срабатывает, когда пользователь хочет перейти на страницу. Не нужно усложнять все еще больше