url中的角度路由更改

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 url..

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

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

最后在url中添加用户

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

我的要求是，如果用户像上面那样更改 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 和组件..

编辑

我不是要阻止登录，用户可以登录并可以带回家组件但如果用户有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 组件所以如果他从主组件https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user 给出这样的url，然后重定向回主组件..

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

Answer 1

使用与 Home 组件中相同的条件修改 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;
}

实现此目的的一种简单而干净的方法是为 HomeComponent 设置单独的保护。

@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

Answer 2

您应该在 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 供您参考。