Question

所以我一直在线阅读教程，并且有一个简单的登录组件，但似乎没有像我期望的那样工作？我在下面有一个登录组件：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';

// Services
import { AuthService } from '../../_services/auth.service';

@Component({
    styles: [require('./login.component.css')],
    template: require('./login.component.html'),
    providers: [AuthService]
})
export class LoginComponent {

    constructor(private _router: Router, private _authService: AuthService) {

    }

    login(form) {
        var email = form.form._value.email;
        var password = form.form._value.password;
        var response = this._authService.login(email, password);
        if (response) {
            this._router.navigate(['dashboard']);
        } else {
            console.log("error");
        }
    }
}

在路由CanActivate

上设置的身份验证保护

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

import { AuthService } from '../_services/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private _router: Router, private _authService: AuthService) {

    }

    canActivate() {
        console.log("auth: " + this._authService.isLoggedIn);
        if (this._authService.isLoggedIn == true) {
            // logged in so return true
            return true;
        } else {
            // not logged in so redirect to login page
            this._router.navigate(['login']);
            return false;
        }
    }
}

最后我的身份验证服务实际上负责登录，这反过来设置了我的canActivate身份验证防护中使用的变量。

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

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

    constructor(private http: Http) { }

    login(username, password) {
        this.isLoggedIn = true;
        console.log("set: " + this.isLoggedIn);
        return true;
    }

    logout() {
        this.isLoggedIn = false;
    }
}

现在，当我运行登录功能时，isLoggedIn变量成功设置为true，但在导航到仪表板时运行防护时，变量isLoggedIn设置为false。现在在我的脑海里，我希望它是真的，因为我在运行登录功能时设置它。

许多Thanx。罗斯

Answer 1

该行

providers: [AuthService]

组件中的

告诉Angular为组件的每个实例创建并注入一个AuthService实例。因此，组件中的AuthService实例与您获得的AuthService实例不同，可能来自其他服务中的NgModule提供程序。

只需删除该行，并在根NgModule中声明一个且只有一个AuthService提供程序，因此将由应用程序中的每个组件和服务共享。

Angular2唯一变量设置问题

1 个答案: