网址中的角度路由更改

Question

我正在使用Angle 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>处于隐藏状态，用户也可以手动更改网址 ，因此，如果他将网址<a [routerLink]="['/user']">User</a>

最后在网址中添加用户

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

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

您可以浏览工作中的stackblitz https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm

您就可以得到我所需要的。

在stackblitz中，如果您提供https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user则它将重定向到用户组件，但是如果登录的用户具有"fake-jwt-token" ，则用户是严格不允许访问user URL和组件..

编辑

我并不是要阻止登录 ，该用户可以登录并可以转到home组件，但是如果该用户具有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组件的user因此，如果他从本地组件https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user ，然后重定向回本地组件。

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

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;
  }
}

---

这是供您参考的工作样本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