Javascript url中的角度路由更改

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

Html:

这里，如果

user.token==“伪jwt令牌”

那么我不应该允许用户导航到

user

url

它现在隐藏url，没有相关问题

即使

你可以得到我需要的东西

如果你给出
https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
然后它将重定向到用户组件，但是我们的主页有一个条件，如果登录的用户有
“伪jwt令牌”
，则严格禁止用户访问
用户
url和组件

编辑

我不是要求阻止登录，用户可以登录并可以带回家组件，但如果用户拥有
伪造的jwt令牌
，则不允许他单独访问
/user
url，但他可以访问其他页面

拥有
伪jwt令牌的用户可以成功登录，但需要保护以防进入
https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user

第1步：

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

第二步：

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

第三步：
现在登录的用户有
假jwt令牌
，因此登录后限制他访问
用户
组件，因此如果他从主组件中给出这样的url
https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
，然后重定向回主组件

请帮助我阻止用户使用“伪jwt令牌”进入用户路由url。
您应该在
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;
  }
}


这里有一个供您参考的示例。
您应该在
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;
  }
}


下面是一个供参考的示例。
使用与主组件中相同的条件修改您的身份验证保护

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: '' }
];

请参见此处的示例：
使用与主组件中相同的条件修改身份验证保护

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: '' }
];

请参见此处的示例：
您的意思是在登录一次后直接更改路由url？如果您没有登录，它可以正常工作。@xyz，自登录时没有问题，但在登录后如果令牌是假的jwt令牌，则用户不允许访问用户组件，因此他无法通过直接移动到用户url。。那么为什么错过在Auth Guard的主组件中应用的应用条件：D@xyz,对不起，我找不到你。。我是angular的新手，因此即使在基于伪jwt令牌登录后，我也无法阻止用户进行此类重定向。。因此请求帮助，请用我为更好理解而提供的stackblitz帮助我。你是说在登录一次后直接更改路由url？如果您没有登录，它可以正常工作。@xyz，自登录时没有问题，但在登录后如果令牌是假的jwt令牌，则用户不允许访问用户组件，因此他无法通过直接移动到用户url。。那么为什么错过在Auth Guard的主组件中应用的应用条件：D@xyz,对不起，我找不到你。。我是angular的新手，因此即使在基于伪jwt令牌登录后，我也无法阻止用户进行此类重定向。。因此请求帮助，请使用我为更好理解而提供的stackblitz帮助我。@undefined:可以在此处检查：如果我分别在登录用户名和密码中进行测试和测试，则它不是重定向主组件。。请重新检查stackblitz..@undefined:您是正确的，不应该这样。因为那个用户有
假的jwt令牌
，我不确定我是否解释清楚了。。用户可以登录并可以进入主组件，但如果他拥有
伪jwt令牌
则他不能单独进入用户组件，但他可以在登录后前往任何地方。只有拥有
伪jwt令牌
的用户的路由器链接受到限制，但他可以成功登录并进入主页。。没有问题..@undefined:可以在这里检查：如果我在登录用户名和密码中分别给出test和test，它并没有重定向home组件。。请重新检查stackblitz..@undefined:您是正确的，不应该这样。因为那个用户有
假的jwt令牌
，我不确定我是否解释清楚了。。用户可以登录并可以进入主组件，但如果他拥有
伪jwt令牌
则他不能单独进入用户组件，但他可以在登录后前往任何地方。只有拥有
伪jwt令牌
的用户的路由器链接受到限制，但他可以成功登录并进入主页。。it中没有问题..loggedin后未重定向到主组件。。它显示加载时间很长，但什么也没有发生。。你能检查一下吗？谢谢你的解决方案请阅读我编辑的问题。。用户可以登录，但如果他有
假jwt令牌
，他不应该只允许访问
/User
路由器链接。是的。因为您只在
'
和
'/user'