MEANスタックを使用してページをリロードした後にログインする方法

Question

私は非常に単純なMEANスタックアプリケーション（マングースなし）で作業しています。 私はユーザーをrobomongoに保存するためにシンプルなコレクションを使用しています。 アプリケーションにログインすると、従業員と製品が表示されます。

しかし、ページを更新すると、もうログインしていないので、もう一度ログインする必要があります。この問題をどうやって解決するのですか？ セッションや何かで私のloggedinuserを覚えておく必要があります。

これは私のuser.service.tsクラスです：

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

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

@Injectable() 
export class UserService { 

    private isUserLoggedIn; 
    public username; 
    result:any; 

    constructor(private _http: Http) { 
    this.isUserLoggedIn = false; 
    } 
    getUsers() { 
    return this._http.get("/api/users") 
     .map(result => this.result = result.json().data); 
    } 
    addUser(newUser){ 
     console.log("add new user" + newUser); 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this._http.post('/api/users', JSON.stringify(newUser), {headers: headers}) 
     .map(res => res.json()); 
    } 


    setUserLoggedIn(name) { 
    this.isUserLoggedIn = true; 
    this.username = name; 
    } 
    getNameUserLoggedIn() 
    { 
    return this.username; 
    } 
    getUserLoggedIn() { 
    return this.isUserLoggedIn; 
    } 

} 

そして、これは私のログインフォームです：あなたがプロジェクト全体のアクセス権を持っているしたい場合は

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import {UserService} from '../user.service'; 
import {DataService} from '../data.service'; 

@Component({ 
    selector: 'app-login-form', 
    templateUrl: './login-form.component.html', 
    styleUrls: ['./login-form.component.css'] 
}) 
export class LoginFormComponent implements OnInit { 

    users: Array<any>; 

    constructor(private router:Router, private userService:UserService , private _dataService : DataService) { 
     this._dataService.getUsers() 
     .subscribe(res => this.users = res); 


    } 

    ngOnInit() { 
    console.log('hit'); 
    } 

    loginUser(e) { 
    e.preventDefault(); 
    console.log(e); 
    var username = e.target.elements[0].value; 
    var password = e.target.elements[1].value; 
     var c = 0; 

    for(var i = 0;i < this.users.length;i++){ 

    if(username == this.users[i].name && password == this.users[i].pass) 
    { 
     this.userService.setUserLoggedIn(username);  
    // alert("You are now logged in as user " + username) 
    c++; 
     this.router.navigate(['employee']); 
    } 
    } 
    if(c == 0) 
    alert("The combination is incorrect, please try again !"); 
    else{ 
     alert("You are now logged in as " + username); 
    } 

    } 

} 

は、私のGitHubのレポを表示します。 https://github.com/TimVanDorpe/mean

Answer 1

私のクラスをこれに変更しました。 私はちょうどsessionStorageを追加しました！

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

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

@Injectable() 
export class UserService { 

    private isUserLoggedIn; 
    public username = String; 
    result:any; 

    constructor(private _http: Http) { 
    this.isUserLoggedIn = false; 
    } 
    getUsers() { 
    return this._http.get("/api/users") 
     .map(result => this.result = result.json().data); 
    } 
    addUser(newUser){ 
     console.log("add new user" + newUser); 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this._http.post('/api/users', JSON.stringify(newUser), {headers: headers}) 
     .map(res => res.json()); 
    } 


    setUserLoggedIn(name) { 
    this.isUserLoggedIn = true;  
    sessionStorage.setItem('username', name); 
    this.username = name; 
    } 
    getNameUserLoggedIn() 
    { 
    return sessionStorage.getItem('username'); 
    } 
    getUserLoggedIn() { 
    return this.isUserLoggedIn; 
    } 

}