代码之家 › 专栏 › 技术社区 › Adnan

角度2:创建后访问Cookie

cookies typescript angular javascript

Adnan · 技术社区 · 7 年前

我有两个组件和一个服务

组件:

服务:

1: 身份验证.服务

使现代化

 import { Component, OnInit } from '@angular/core';
import { CookieHelper } from '../../_helpers/index';

@Component({
moduleId: module.id,
selector: 'app-header-ichart',
templateUrl: 'header.component.html',
styleUrls: ['header.component.css']
})

export class HeaderComponent implements OnInit {
currentUser = '';
isLogged = false;
constructor(private cookie: CookieHelper) { }


ngOnInit() {
     this.isLogged = this.cookie.checkCookie('currentUser');
     if (this.isLogged) {
         this.currentUser = JSON.parse(this.cookie.getCookie('currentUser'));
     }
}
}

我使用了你的建议技巧来实现我的目标,但需要更多帮助:

AuthenticationService:

import { Injectable } 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 { AppConfig } from '../app.config';
import { CookieHelper } from '../_helpers/index';

@Injectable()
export class AuthenticationService {

  cookies: Object;
  keys: Array<string>;
  user$ = new Subject<any>();

  constructor(private http: Http, private config: AppConfig, private cookie: CookieHelper) { }

  login(username: string, password: string) {
    const headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let body = `grant_type=${'password'}&username=${username}&password=${password}`;
return this.http.post(
  this.config.apiUrl + '/token',
  body, { headers: headers })
  .map((response: Response) => {
    // login successful if there's a jwt token in the response
    let user = response.json();

    if (user && user.access_token) {
      user['username'] = username;
       // Observable Variable
      this.user$.next(JSON.stringify(user));

      // store user details and jwt token in cookie to keep user logged in between page refreshes
      this.cookie.addCookie('currentUser', JSON.stringify(user));
    }
  });
  }

  getUser(): Observable<any> {
    return this.user$.asObservable();
  }

  logout() {
// remove user from cookie to log user out
this.cookie.removeCookie('currentUser');
   // Logout Subscribe
this.user$.next(null);

  }
}

标题组件:

export class HeaderComponent implements OnInit {
currentUser = '';
isLogged = false;
constructor(private cookie: CookieHelper, private auth: AuthenticationService) { }


ngOnInit() {
    // Get the currentUser from Observable Variable
    this.auth.getUser().subscribe(currentUser => { this.currentUser = currentUser; });
    console.log(this.currentUser);
     this.isLogged = this.cookie.checkCookie('currentUser');
     if (this.isLogged) {
         this.currentUser = JSON.parse(this.cookie.getCookie('currentUser'));
     }
}
}

1 回复 | 直到 7 年前

crash 7 年前

我建议使用 Observable 为了实现这一点。所以你的 headerComponent

authentication.service 这样你就有了

import { Subject } from 'rxjs/Subject';

export class AuthenticationService {
    user$: Subject<any>;

    login() {
      // login stuff
      this.user$.next('userDetails');
    }

    logout() {
      this.user$.next(null);
    }
}

然后从你想要的任何组件中检查 user$ 可观察。

在模板中使用

{{ (user$ | async)?.username }}

user$.subscribe(user => console.log(user.username))