Question

我正在处理一个非常简单的MEAN堆栈应用程序（没有mongoose）。我使用简单的集合将我的用户存储在robomongo中。当您登录我的应用程序时，您可以看到您的员工和产品。

但是当您刷新页面时，您不再登录，您必须再次登录。我该如何解决这个问题？我需要通过会话或其他东西来记住我的登录用户。

这是我的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！

     <div class="home-section-content

<!--
<div id="google-maps">  <!-- <div style=" margin:auto; ">
<style type="text/css"> 
#google-maps  {
mar gin: auto;
width: 125%;
border: 3px solid #73AD21;
padding: 10px;
margin-left: auto ;
margin-right: auto ;
}       
</style>
-->
            <br><br><br>

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2989.608839663209!2d-8.163739!3d41.4693985!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd24e87671374bf1%3A0x9a3a665c9521b5a4!2sR.+de+S%C3%A3o+Mateus+193%2C+4820-500+Ascens%C3%A3o!5e0!3m2!1sen!2spt!4v1511832699133" 
     width="1400" height="800" ali gn="center" frameborder="0" style="border:0" allowfullscreen></iframe>

        </div>

如何使用MEAN堆栈重新加载页面后保持登录状态

1 个答案: