AuthGuard направляет к '' в угловых 7 - PullRequest
Новая
       23

AuthGuard направляет к '' в угловых 7

0 голосов
/ 11 мая 2019

Я пытаюсь реализовать auth guard для моего приложения.

Код, который я написал в моем файле authGuard ts: 

import {Injectable} from '@angular/core';
import {UserService} from '../../services/user.service';
import {CanActivate, Router} from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {

  constructor(private userService: UserService,
              private router: Router) {
  }

  canActivate(): boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }
}

, и мой модуль маршрутизации выглядит следующим образом: 

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {UserComponent} from './modules/user/user.component';
import {AuthService} from './common-modules/auth/auth.guard';


const routes: Routes = [

  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'me',
    component: UserComponent,
    canActivate: [AuthService]
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Итак, насколько я знаю, это работает нормально.Но даже если проверка подлинности возвращает значение true, мое приложение перенаправляется на localhost: 4200 вместо localhost: 4200 / me

Я не могу найтипричина этого.Пожалуйста, помогите мне решить эту проблему.

Ответы [ 3 ]

0 голосов
/ 11 мая 2019

Вы должны использовать этот шаблон: 

 canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): 
              Observable<boolean> | Promise<boolean> | boolean { 
const token = sessionStorage.getItem('token');
if (!token) {
  this.router.navigate(['login']);
  return false;
} else {
  this.userService.getAuthenticatedUserDetails()
    .then(data => {
      if (data) {
        return true;
      } else {
        this.router.navigate(['login']);
        return false;
      }
    })
    .catch(error => {
      this.router.navigate(['login']);
      return false;
    });
   }
 }
0 голосов
/ 11 мая 2019

Я не уверен, потому что я не пробовал, но я думаю, что это происходит, потому что вы не используете next и observable

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }
0 голосов
/ 11 мая 2019

Не экспериментировал с обещаниями, но вы обязательно должны его вернуть. С Observables вы можете попробовать: 

return this.userService.getAuthenticatedUserDetails()
    .pipe((map(data) => {
      if (data) {
        return true;
      } else {
          this.router.navigate(['login']);
          return false;
      }

    }),catchError(e => {
      this.router.navigate(['login']);
      return throwError(false);
    }))
...