Угловая маршрутизация: необходимо запретить навигацию, если URL-адрес, введенный в адресной строке браузера, недопустим - PullRequest
Новая
       19

Угловая маршрутизация: необходимо запретить навигацию, если URL-адрес, введенный в адресной строке браузера, недопустим

0 голосов
/ 01 октября 2019

Требуется проверить URL браузера, если пользователь набрал его вручную. Если введенный URL-адрес недействителен или пользователь не имеет к нему доступа, оставайтесь на той же странице с некоторым всплывающим предупреждением.

Я пробовал следующее -

CanDeactivate - это не получитсясрабатывает при нажатии введите в адресной строке. CanActivate - текущий URL, по которому я сейчас работаю, теряется. Все, что я могу сделать, это проверить целевой URL. И перенаправление может быть выполнено. CanLoad - так же, как CanActivate. текущий URL теряется.

Window.onbeforeunload - не удается получить доступ к целевому URL из адресной строки.

Дайте мне знать, достижимо ли это требование и как.

Ответы [ 3 ]

0 голосов
/ 01 октября 2019 
constructor(  private router: Router) {
   if ( "some condition") {
      this.router.navigate( ['/Home'] );
   }
}
0 голосов
/ 01 октября 2019

С помощью нескольких методов вы можете предотвратить доступ (Inteceptor, Wildcard route, CanActive guard), где система предотвращает случайный или недействительный доступ

01) Если вы хотите предотвратить несанкционированный доступВы можете использовать Interceptor. Из серверной части необходимо указать роль пользователя (например, SYSTEM_ADMIN)

В unauthorized.interceptor.ts 

@Injectable()
export class UnauthorizedInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(request).pipe(catchError(err => {
            if ([401, 403].indexOf(err.status) !== -1) {               
                // YOUR POP UP MESSAGE
            }

            const error = err || err.statusText;
            return throwError(error);
        }))
    }
}

В AppModule.ts 

@NgModule({
    ...,
    [{
      provide: HTTP_INTERCEPTORS,
      useClass: UnauthorizedInterceptor,
      multi: true
    }]
})

02) Использовать подстановочный знак углового маршрутизатора - это помогает перенаправить страницу на PageNotFoundComponent, если URL не найденв твоем роутинге. Помните, что подстановочный маршрут должен быть последним маршрутом. 

{path: '404', component: PageNotFoundComponent},
{path: '**', redirectTo: '/404'}

03) Использование canActive Guard

На маршруте 

{
    path: "customer/view",
    component: CustomerViewComponent,
    data: { role: ["SYSTEM_ADMIN"] }
}

В AuthGuard.ts 

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor (private auth: AuthService, private router: Router, public toster: ToastrManager,) {
}
canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        //get the current user value
        const currentUser = this.auth.currentUserValue;      
        if (currentUser) {

            // check if route is restricted by role 
            if (route.data.role && route.data.role.indexOf(currentUser.role) === -1) {
                this.toster.errorToastr("Your do not have permission to access", "Not Authorized", { position: "bottom-right", animate: "slideFromBottom" });
                return;
            }

            // authorised so return true
            return true;
    }

     // not logged in so redirect to login page with the return url
     this.router.navigate(['/signin']);
     return false;
    }
}
0 голосов
/ 01 октября 2019

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

Пользователь, имеющий доступ к HTML, может легко обойти это.

Кроме того, Angular не предоставляет встроенного способа сделать это, поэтому вам придется кодировать свой собственный код (возможно, через распознаватель, но это не помешает загрузке страницы).

...