Angular 5 - 如果用户已登录，则重定向到另一个视图

Question

我使用Authguard和一项名为User的服务，除非您登录，否则他们不允许访问某些视图。
所以我发现了一些错误：
1）即使他们被记录，他们仍然可以访问登录视图 （我在login.component.ts中添加了此代码，但仍然无效）。

 isLog() {
if (this.user.getUserLoggedIn() === true) {

  this.router.navigate(['/products']);
} else {
 this.router.navigate(['/login']);
}}

1.1）如果他们使用后退/前进/刷新＆＃34;他们自动退出＆＃34;（它重定向到登录，我必须再次访问。

Authguard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {UserService} from './user.service';

@Injectable()
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

userService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }
  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
  }
}

我的路线（在app.module.ts中添加）

const appRoutes: Routes = [
  {path: 'login',  component: LoginComponent},
  {path: 'cPanel', canActivate: [AuthguardGuard], component: CPanelComponent},
  {path: 'cPanel/producto/crearProducto', canActivate: [AuthguardGuard] , component: CrearProductoComponent},
  {path: 'productos', canActivate: [AuthguardGuard] , component: ProductosComponent},
  {path: 'cPanel/producto/modificarProducto/:id', canActivate: [AuthguardGuard], component: ModificarProductoComponent},
  {path: 'cPanel/usuario/crearUsuario', canActivate: [AuthguardGuard] , component: CrearUsuarioComponent},
  {path: 'cPanel/usuario/modificarUsuario/:id', canActivate: [AuthguardGuard] , component: ModificarUsuarioComponent},
  {path: 'cPanel/menu/modificarMenu/:id', canActivate: [AuthguardGuard], component: ModificarMenuComponent},
  {path: 'cPanel/menu/crearMenu', canActivate: [AuthguardGuard], component: CrearMenuComponent},
  {path: 'menu', canActivate: [AuthguardGuard] , component: MenuComponent},
  {path: '',
    redirectTo: 'login', canActivate: [AuthguardGuard],
    pathMatch: 'full'},
  {path: '**', component: E404Component},
  ];

Answer 1

<强> login.component.ts

    constructor(
    private userService : UserService,
    private router: Router
) {
    if (this.loginService.getLogin()) {
        this.router.navigate(['product'])
    }
 }

如果您不小心返回，这会自动将您重定向到'/ product'，但如果您重新加载页面则不会保留

如果您希望登录数据保持不变（刷新等），您应该在userService中使用会话存储或cookie来存储您的登录数据

<强> userService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

login: boolean = false;
storage: Storage;

constructor() {
    this.storage = window.localStorage;
    if (this.storage.getItem('login')) {
        this.login = this.storage.getItem('login') == 'true'
    }

 }

setLogin(val:boolean) {
    this.login = val
    this.storage.setItem('login',val == true ? 'true' : 'false')
}

getLogin() {
    return this.login
}

}

编辑关于plunker https://plnkr.co/edit/XsGhXgte3woDfpKJdLxP?p=info

的工作示例

另外，我仅使用一个简单的值作为示例，这是一个关于使用json web令牌进行身份验证的好读物：http://jasonwatmore.com/post/2016/08/16/angular-2-jwt-authentication-example-tutorial

Answer 2

通过稍微修改现有代码登录

添加了使用localStorage来保存您的登录信息。然而，这可能不是最好的方法。如果您需要正确的用户身份验证，则应修改此选项以使用令牌（即json Web令牌（JWT））来正确验证您的用户。

userService.ts

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {



public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
    localStorage.setItem('login',this.isUserLoggedIn);
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
    localStorage.setItem('login',this.isUserLoggedIn);
  }
  getUserLoggedIn() {
    return (localStorage.getItem('login') != null ? localStorage.getItem('login') : false);
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
    localStorage.setItem('login',this.isUserLoggedIn);
  }
}

我自己的Login组件供参考

export class LoginComponent implements OnInit {
  private sub: any;
  private results: any;
  title: string = "Login";
  subtitle: string = "Welcome owner";
  constructor(private route: ActivatedRoute, private http: HttpClient, private authService: AuthService, public router: Router) { }

  ngOnInit() {
    if (this.authService.isAuthenticated()) {
      this.router.navigate(['write']); // if user was logged in before, redirect to default landing page
    }
  }
  onSubmit(f: NgForm) {
    var formItems = JSON.stringify(f.value);
    this.authService.login(JSON.stringify(f.value)).subscribe(data => {
      if (data) { // auth service returns boolean value
        this.router.navigate(['write']);
      }
      else {
        console.log("invalid credentials");
      }
    });
  }
}