Javascript Angular2-登录后重定向

我想在登录后在另一条路径上导航我的用户

我在文档中发现，类似这样的东西应该可以正确地工作：

this.router.navigate(['/users']);

我在Component中的完整方法如下所示：

// imports on top
import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { Router } from '@angular/router';

// method somewhere below
login(event, username, password) {
  event.preventDefault();
  let body = JSON.stringify({ username, password });

  this.loginService.login(body)
      .then(res => localStorage.setItem('token', res.msg))
      .catch(error => this.error = error);

  this.router.navigate(['/users']);
}

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  // users route protected by auth guard
  { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
  // { path: 'user/:id', component: HeroDetailComponent },
  { path: '**', redirectTo: 'users' }

];

export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate() {
    if (localStorage.getItem('token')) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page
    this.router.navigate(['/login']);
    return false;
  }
}

然而，它并没有改变我的方向。基本上路线保持不变，控制台中未发现错误

我做错了什么

编辑： 我的路线如下：

// imports on top
import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { Router } from '@angular/router';

// method somewhere below
login(event, username, password) {
  event.preventDefault();
  let body = JSON.stringify({ username, password });

  this.loginService.login(body)
      .then(res => localStorage.setItem('token', res.msg))
      .catch(error => this.error = error);

  this.router.navigate(['/users']);
}

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  // users route protected by auth guard
  { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
  // { path: 'user/:id', component: HeroDetailComponent },
  { path: '**', redirectTo: 'users' }

];

export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate() {
    if (localStorage.getItem('token')) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page
    this.router.navigate(['/login']);
    return false;
  }
}

我的AuthGuard看起来像：

// imports on top
import { Component } from '@angular/core';
import { LoginService } from './login.service';
import { Router } from '@angular/router';

// method somewhere below
login(event, username, password) {
  event.preventDefault();
  let body = JSON.stringify({ username, password });

  this.loginService.login(body)
      .then(res => localStorage.setItem('token', res.msg))
      .catch(error => this.error = error);

  this.router.navigate(['/users']);
}

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent},
  // users route protected by auth guard
  { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
  // { path: 'user/:id', component: HeroDetailComponent },
  { path: '**', redirectTo: 'users' }

];

export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate() {
    if (localStorage.getItem('token')) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page
    this.router.navigate(['/login']);
    return false;
  }
}

this.router.navigate（['/users']）； 这应该在.then（）函数中的localStorage.setItem（）之后调用

---

如果仍然不起作用，请您在留言中输入该类代码。我的电脑上也有类似的问题。问题是对用户进行身份验证时有延迟，但是

router.navigate

会立即执行。由于您站点的用户部分受到保护，并且您的技术仍然未经验证，因此重定向失败

通过在

上重定向，然后

等待用户登录，如果成功，则重定向用户

尝试使用以下方法：

this.loginService.login(body)
      .then(
            res => localStorage.setItem('token', res.msg)
            this.router.navigate(['/users']);
       )
      .catch(error => this.error = error);

---

嘿@Alexis Le Gall，谢谢你的回答。我同意要使它正确，它应该在

的内部。但是，这不应影响路线是否改变。如果它在服务发出的
响应之前或之后重定向，则应该进行更改。错误可能来自路由文件，很难说代码的这一部分编辑了我的问题并添加了请求的文件：）AuthGuard阻止激活路由，直到用户被连接为止。您从loginService.login获得了什么数据作为响应，如果为false，AuthGuard阻止用户访问该路由Hey@AnmolMittal它是JSON对象：）