身份验证保护不起作用

Question

我正在尝试使 auth guard 工作，但变量 isLoggedIn 始终保持为 false。我尝试添加为核心模块，但它仍然返回false。我尝试了不同的方法，但都没有奏效。

import { Injectable, Component, Input } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

@Injectable()
export class AuthService {
    private isLoggedIn: boolean = false;

    constructor(private http: Http) {
    }

    public getIsLoggedIn(): boolean {
        console.log("getIsLoggedIn() = " + this.isLoggedIn); // always false
        return this.isLoggedIn;
    }

    login(email: string, password: string) {
        return this.http.post('http://localhost:1337/login', JSON.stringify({ email: email, password: password }))
            .map((response: Response) => {

                // login successful if there's a jwt token in the response
                let user = response.json();
                if (user) {
                    this.isLoggedIn = true;
                    return JSON.stringify(user);
                }
                return JSON.stringify({ user: "not found" });
            });
    }
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class AuthGuardService implements CanActivate {
    constructor(private authService: AuthService) {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.checkLogin();
    }
    checkLogin(): boolean {
        if (this.authService.getIsLoggedIn()) {
            return true;
        }
        return false;
    }
}

Answer 1

登录时

localStorage.setItem('isLoggedin', 'true');

在你的保护下

canActivate() {
        if (localStorage.getItem('isLoggedin')) {
            return true;
        }

        this.router.navigate(['/login']);
        return false;
    }


const routes: Routes = [
    {
        path: '',
        loadChildren: './layout/layout.module#LayoutModule', //Rest of routes that requieres to be logged
        canActivate: [AuthGuard]
    },
    { path: 'login', loadChildren: './login/login.module#LoginModule' }

];

Answer 2

要解决您的问题，您需要将变量保存在 sessionStorage 中，如下所示：

public getIsLoggedIn(): boolean {
   var isLoggedIn = sessionStorage.getItem('isLoggedIn')
    console.log("getIsLoggedIn() = " + this.isLoggedIn); // always false
    return this.isLoggedIn;
}

并这样设置：

  login(email: string, password: string) {
        return this.http.post('http://localhost:1337/login', JSON.stringify({ email: email, password: password }))
            .map((response: Response) => {

                // login successful if there's a jwt token in the response
                let user = response.json();
                if (user) {
                    //this.isLoggedIn = true;
          sessionStorage.setItem('isLoggedIn')='true';
                    return JSON.stringify(user);
                }
                return JSON.stringify({ user: "not found" });
            });
    }

你应该很高兴！这就是我在产品代码中使用的。

但是，如果您仍想使用您的变量来保存这样的值，您应该看看 Subjects。 This tutorial 解释的很好。