Как удалить queryParams после навигации |угловатый - PullRequest
Новая
       29

Как удалить queryParams после навигации |угловатый

1 голос
/ 25 апреля 2019

Я использую приложение Angular и пытаюсь проверить CanActivate, если token действительно, если это действительно так, верните true. Если это правда, мне нужно удалить его из url Я пытался этот код, чтобы удалить URL-параметр

let url: string = this.router.url.substring(0, this.router.url.indexOf("?")); this.router.navigateByUrl(url);

но он входит в бесконечный цикл. Как убрать параметры после проверки их валидности? 

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    let accesstoken: string = next.queryParams.accesstoken;
    if (this.authService.IsAuthenticated) {

      let user = this.authService.GetUser();
      let CurrentDate = new Date();
      let date = CurrentDate.getFullYear() + "-" + (CurrentDate.getMonth() + 1) + "-" + CurrentDate.getDate();

      if (Date.parse(date) <= Date.parse(user.expire_date)) {
        return true;
      }
    }
      else if (!NOU(accesstoken)) { // In case current registered token is not valid, CheckAccess with new token
        // this.authService.logout();
        this.authService.checkAccess(accesstoken).subscribe(
          data => {
            if (data === true) {
              return true;
            } else {
              this.router.navigate(['/login']);
              return false;
            }

          },
          error => {

          }
        );
      }
      else {
        this.router.navigate(['/login']);
        return false;
      }

  }

`

auth.service.ts 

     checkAccess(accesstoken: string) {
    let Headers = new HttpHeaders();
    Headers = Headers.append('AuthenticationToken', accesstoken);
    return this.dataService
      .post<any>(`${this.authUrl}CheckAccess.json`, null, { headers: Headers })
      .pipe(
        map(response => {
          const authenticated = response.flag;
          // login successful
          if (authenticated) {
            // you can use  JSON.parse(localStorage.getItem('user')) statement to get the user information when needed.
            const user = new User(response);
            localStorage.setItem('user', JSON.stringify(user));
            localStorage.setItem('AuthenticationToken', accesstoken);
            this.IsAuthenticated = true;
            this.authenticationSource.next(true);
            // return true to indicate successful login
            return authenticated;
          }
        }),
        catchError(conError => {
          // return false to indicate failed login response 401
          return 'Failed';
        })
      );
  }

обращенно-auth.guard.ts 

    export class ReverseAuthGuard implements CanActivate {
  constructor(private router: Router, private authService: AuthService) { }
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {

    if (this.authService.IsAuthenticated) {
      let user = this.authService.GetUser();
      let CurrentDate = new Date();
      let date = CurrentDate.getFullYear() + "-" + (CurrentDate.getMonth() + 1) + "-" + CurrentDate.getDate();

      if (Date.parse(date) > Date.parse(user.expire_date)) {
        // this.router.navigate(['/']);
        return true;
      }
      this.router.navigate(['/home']);
      return false;

    }
    else {
      return true;
    }

  }
}

приложение-routing.module.ts 

   const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'home',
        loadChildren: './home/home.module#HomeModule',
        data: {
          title: 'Home'
        }
      },
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: 'unauthorized',
    component: UnauthorizedComponent,
    canActivate: [ReverseAuthGuard],
    data: {
      title: 'Unauthorized'
    }
  },
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [ReverseAuthGuard],
    data: {
      title: 'Login'
    }
  }
];

Ответы [ 2 ]

1 голос
/ 28 апреля 2019

Вы пойдете в бесконечный цикл, потому что вы всегда перенаправляете на логин, и логин будет проверять токен после его удаления, что снова сделает перенаправление.

Решением для этого является сохранение вашего токена в хранилище сессии: 

else if (!NOU(accesstoken)) {
     this.authService.checkAccess(accesstoken).subscribe(
       data => {
         if (data === true) {
           sessionStorage.setItem('access_token', accesstoken);
           return true;
         } else {
           const storageAccessToken = sessionStorage.getItem('access_token');
           if (storageAccessToken) {
              return true;
           }
           this.router.navigate(['/login']);
           return false;
         }
      });
 } else {
    const storageAccessToken = sessionStorage.getItem('access_token');
    if (storageAccessToken) {
       return true;
    }
    this.router.navigate(['/login']);
    return false;
 }

И вы можете перенаправить без проблем. Чтобы удалить его из своего URL, есть много способов сделать это, как упомянул Фатех в своем ответе.

Edit:

После вашего нового редактирования ответа я понял, что проблема с вашим кодом - это перенаправление, когда токена нет. Итак, основное условие может решить проблему: 

if (this.authService.IsAuthenticated) {

  let user = this.authService.GetUser();
  let CurrentDate = new Date();
  let date = CurrentDate.getFullYear() + "-" + (CurrentDate.getMonth() + 1) + "-" + CurrentDate.getDate();

  if (Date.parse(date) <= Date.parse(user.expire_date)) {
    // check if accesstoken exists
    if (accesstoken) {
       // redirect only when exists
       this.router.navigateByUrl(window.location.pathname);
    }
    return true;
  }
}
  else if (!NOU(accesstoken)) { // In case current registered token is not valid, CheckAccess with new token
    // this.authService.logout();
    this.authService.checkAccess(accesstoken).subscribe(
      data => {
        if (data === true) {
           // check if accesstoken exists
           if (accesstoken) {
             // redirect only when exists
             this.router.navigateByUrl(window.location.pathname);
           }
          return true;
        } else {
          this.router.navigate(['/login']);
          return false;
        }

      },
      error => {

      }
    );
  }

Надеюсь, что ответит на ваш вопрос

0 голосов
/ 25 апреля 2019

вы можете удалить параметры запроса по их именам, передав нулевое значение, если мы предположим, что имя вашего параметра запроса - 'token' 

this.router.navigate(
 ['login'], {
 queryParams: {
  token: null // pass null value to token delete it 
 },
 queryParamsHandling: 'merge'
})
...