Question

我正在开发angular 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网址。

它现在隐藏了网址，没有问题。

问题是，即使<a [routerLink]="['/user']">User</a>处于隐藏状态，用户仍可以手动更改网址，因此，如果他将其设为类似网址，

最后在网址中添加用户

https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user，它正在重定向到用户页面。

我的要求是，如果用户像上述那样更改url，则不应允许该URL，并且重定向必须发生到先前的状态。

您可以探索有效的堆叠闪电战 https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm

您就可以得到我需要的东西。

在堆栈闪电中，如果您提供https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user，它将重定向到用户组件，但是，如果登录的用户具有"fake-jwt-token"，则我们的主页有一个条件，则严格禁止该用户访问user网址和组件。

修改

我并没有要求阻止登录，该用户可以登录并可以转到家庭组件，但是如果用户拥有fake-jwt-token，则不允许他进入{ {1}}单独的网址，但他可以访问其他页面。

拥有/user的用户可以成功登录，但需要防止进入fake-jwt-token

第1步：

用户可以使用test登录，并以用户名和密码登录

第2步：

提供凭据后，用户将被重定向到home组件。

第3步： 现在，已登录的用户拥有https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user，因此登录后限制了他访问fake-jwt-token组件，因此，如果他从本地组件user提供这样的url，则将其重定向回本地组件。 / p>

请帮助我阻止用户使用“ fake-jwt-token”进入用户路由网址。

Answer 1

您应该在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;
  }
}

这是您推荐的Working Sample StackBlitz。

Answer 2

使用与家庭组件相同的条件来修改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

网址中的角度路由更改

2 个答案: