Question

希望你很好。

我的挑战

现在我按以下方式设置了我的应用：
- 应用程序组件
  - 侧导航组件
  - 内容组件
    - 工具栏组件
    - 路由器插座
当用户通过 LogInPageComponent （显示在路由器插座中）登录时，组件使用我的 AuthService 来调用我的Django后端并返回True如果用户可以通过身份验证，则返回false。
此时，理想情况下， SideNavComponent 应该监听此更改并显示所有可用链接，而不仅仅是“登录”。

我尝试了什么

我在网上读到，我可以根据用户是否登录，将行为主题对象设置为布尔值。
- 然后，在SideNavComponent中，我会订阅此行为主题，当它发生变化时，SideNavComponent应该只响应这一变化。
- 但是，实际上，SideNavComponent能够获取Behavior Subject对象的初始状态，但是当我将其值更改为True时（当用户通过身份验证时），SideNavComponent似乎没有监听。代码如下：

auth.service.ts

private _logInUrl: string = "http://127.0.0.1:8000/search/login/";

subject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
subjectObj = this.subject.asObservable();
val: boolean;

authenticateUser(username, password) {

    let headers = new Headers({
        'Content-Type': 'application/json',
        'X-CSRFToken': this.getCookie('csrftoken')
    });

    let options = new RequestOptions({ headers: headers });

    return this._http
        .post(
            this._logInUrl,
            JSON.stringify({"uname": username, "pword" : password}),
            options)
        .map(res => res.json().login_data)
        .map((res) => {
            if (res.logged_in === true) {
                this.subject.next(true);
            } else {
                this.subject.next(false);
            }

            return res.logged_in;

        });

}

sidenav.component.ts

subscription: Subscription;
val: boolean;

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

    this.subscription = this._authService.subjectObj.subscribe(res => {
        this.val = res;
    });

}

奇怪的是我在AuthService中有一个等效的 logOut（）函数，它将BehaviorSubject设置为false。当调用它时，SideNavComponent立即听到更改并适当地显示相关链接。我怀疑这是有效的，因为logOut（）函数是从SideNavComponent本身调用的，然后订阅了BehaviorSubject。但是，当用户登录时，从LogInPageComponent调用LogIn（）函数，而SideNavComponent只是作为第三方收听。

auth.service.ts

logOut() {
    return this._http.get(this._logOutUrl)
        .map(res => {
            this.subject.next(false);
            console.log("Auth: logged out.");
            return res.json().confirmation;
        });
}

我错过了什么吗？一旦AuthService知道用户已登录，我知道如何让SideNavComponent知道吗？

谢谢，伙计们！

尼克

Angular2：在用户进行身份验证时更新sidenav组件

0 个答案: