代码之家 › 专栏 › 技术社区 › Maniraj Murugan

URL中的角度路由更改

angular-routing angular6 typescript angular javascript

-1

Maniraj Murugan · 技术社区 · 6 年前

我正在制作Angular7应用程序,通过路由器和授权保护进行重定向。

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 手动操作,如果他将URL设置为,

最后在URL中添加用户

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

我的要求是,如果用户像上面那样更改URL,则不应允许这样做,并且重定向需要发生在以前的状态。

你可以探索 工作堆垛 https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm

你可以得到我所需要的……

如果你给我 https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user 然后它将重定向到用户组件,但是如果登录的用户 "fake-jwt-token" 则严格禁止用户访问 用户 URL和组件..

编辑

我没有要求阻止登录 ,用户可以登录并可以带回家组件,但如果用户 fake-jwt-token 然后他就不被允许去 /user 只有URL,但他可以访问其他页面。

用户拥有 假JWT代币 可以成功登录,但需要保护才能进入 https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user

步骤1:

用户可以使用test和test作为用户名和密码登录

第2步:

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

步骤3: 现在登录用户已经 伪JWT令牌 所以登录后限制他访问 用户 组件,所以如果他从home组件提供这样的URL https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user ,然后重定向回主组件。

请帮助我阻止用户使用“假JWT令牌”进入用户路由URL。

2 回复 | 直到 6 年前

1

Ashish Ranjan 6 年前

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

要做到这一点,一个简单而干净的方法是为家庭成员配备单独的警卫。

@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

1

SiddAjmera 6 年前

你应该在你的 AuthGuard 作为你 '' 和 'user' 路由已受其保护。

更改 卫士 致:

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 为了你的食物。