Angular url 中的路由更改

Question

我正在制作 angular 7 应用程序，我正在通过路由器和 auth guard 进行重定向..

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，则不应允许，并且需要重定向到以前的状态..

您可以探索 working 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

您应该在 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，使之与您在 Home 组件中的条件相同。

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

Angular url 中的路由更改

Angular routing change in url

javascript

typescript

angular-routing

angular

angular6