Угловое изменение маршрута в URL - PullRequest
Новая
       3

Угловое изменение маршрута в URL

0 голосов
/ 10 декабря 2018

Я делаю угловое приложение 7, где я делаю перенаправление через маршрутизатор и аутентификацию.

HTML:

https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.html

<p *ngIf="showUserRoute">
  <a [routerLink]="['/user']">User</a>
</p>
<p><a [routerLink]="['/login']">Logout</a></p>

Здесь вы можете увидеть ngIf , 

<p *ngIf="showUserRoute">
  <a [routerLink]="['/user']">User</a>
</p>

, для которого ts:

https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.ts

ngOnInit() {

let user = JSON.parse(localStorage.getItem('currentUser'));

 console.log(user.token);

 if(user.token == "fake-jwt-token") {
   this.showUserRoute = false;
 }

}

Здесь, если user.token == "fake-jwt-token", тогда я не должен позволять пользователю переходить на user url ..

Теперь он скрывает URL , никаких проблем по этому поводу..

Проблема даже в том случае, если <a [routerLink]="['/user']">User</a> хранится в скрытом виде, пользователь может изменить URL-адрес вручную, поэтому, если он делает URL-адрес похожим,

Добавлениенаконец, пользователь в URL

https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user, он перенаправляет на страницу пользователя.

Мое требование: если пользователь изменяет URL-адрес, как указано выше, он не должен быть разрешени перенаправление должно произойти в предыдущее состояние ..

Вы можете изучить рабочий стек стека https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm

и вы можете получить то, что мне нужно ..

В стеке, если вы даетеe https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user тогда он будет перенаправлен на пользовательский компонент, но если на нашей домашней странице есть условие, если вошедший в систему пользователь имеет "fake-jwt-token", то пользователю строго не разрешен доступ к user url и компоненту.

Редактировать

Я не прошу запретить вход в систему , пользователь может войти в систему и может быть доставлен на домашний компонент, но если у пользователя есть fake-jwt-tokenзатем ему не разрешили перейти на /user URL-адрес в одиночку, но он может получить доступ к другой странице ..

Пользователь, имеющий fake-jwt-token, может войти в систему успешно, но его необходимо защитить от входа в https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user

Шаг 1:

Пользователь может войти в систему, используя test и test в качестве имени пользователя и пароля

Шаг 2:

Послепредоставив учетные данные, пользователь будет перенаправлен на домашний компонент.

Шаг 3: Теперь вошедший в систему пользователь имеет fake-jwt-token, поэтому после входа в систему ему запрещается доступ к компоненту user, поэтому, если ондает URL-адрес, как это из домашнего компонента https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user, а затем перенаправить обратно на домашний комponent ..

Пожалуйста, помогите мне заблокировать ввод пользователя в URL маршрута пользователя с помощью "fake-jwt-token" ..

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Измените ваш Auth Guard в соответствии с тем же условием, что и в вашем домашнем компоненте. 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let currentUser = localStorage.getItem('currentUser') ? JSON.parse(localStorage.getItem('currentUser')): null;
    if (currentUser && currentUser.token != "fake-jwt-token") {
        // logged in and doesn't have fake token
        return true;
    }
    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
}

Простой и понятный способ добиться этого - установить отдельную защиту для HomeComnponent. 

@Injectable({ providedIn: 'root' })
export class HomeGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      let currentUser = localStorage.getItem('currentUser');
        if (currentUser) {
            // logged in so return true
            return true;
        }
        return false;
    }
}

И ваши маршруты как: 

const appRoutes: Routes = [
    { path: '', component: HomeComponent, canActivate: [HomeGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

Смотрите пример здесь: https://stackblitz.com/edit/angular-6-jwt-authentication-example-42ft5j?file=app%2F_guards%2Fhome.guard.ts

0 голосов
/ 10 декабря 2018

Вы должны были внести изменения в AuthGuard, поскольку ваши маршруты '' и 'user' уже защищены им.

Измените реализацию AuthGuard на следующее: 

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const userFromStorage = localStorage.getItem('currentUser');
    let currentUser = userFromStorage ? JSON.parse(userFromStorage) : null;
    if (currentUser) {
      if(currentUser.token !== "fake-jwt-token" || route.component.name !== 'UserComponent') {
        return true;
      } else {
        this.router.navigate(['/']);
        return true;
      }
    }
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

Вот Рабочий образец StackBlitz для вашей ссылки.

...