Question

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

我在文档中发现这样的东西应该正确地起作用：

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

我在compoenent中的完整方法如下：

// 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' }

];

我的AuthGuard看起来像：

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;
  }
}

Answer 1

我的post问题非常类似。问题是用户身份验证有延迟，但router.navigate会立即执行。由于您网站的用户部分受到保护且技术上尚未经过身份验证，因此无法重定向。

通过重定向.then，它等待您的用户登录，然后如果成功则会重定向您的用户。

尝试使用：

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

Answer 2

this.router.navigate（[ '/用户']）; 这应该在.then（）函数

中的localStorage.setItem（）之后调用

如果它仍然不起作用，请将您的课程代码放在您的留言中

Angular2 - 登录后重定向

2 个答案: