Angular2:用户服务重置

时间:2016-10-21 10:16:29

标签: angular login

起初,抱歉我的语言不好。我是来自德国的学生。

我在Angular中实现了一个用户服务。 2遗憾的是,登录仅部分起作用。当用户通过登录屏幕并手动调用地址栏中的链接时e。 G。 URL / chat,用户服务将重置。用户没有更多权限,也没有登录。

我如何改善服务?

感谢您的回答:)

登录组件

    @Component({
    selector: 'login-form',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.scss']
    })
    export class LoginComponent {
    error:string;
    model = new User("", "");

    constructor(private userService: UserService,
                private router: Router,
                private ErrorHandler:ErrorHandlingService) {
    }
    onSubmit() {
        this.userService.login(this.model.email, this.model.password).subscribe(
            (result) => {
                if (result) {
                    this.router.navigate(['dashboard']);
                }
            },
            (error) => {
              error = this.ErrorHandler.convertMessage(error);
              this.error = this.ErrorHandler.getUserError(error);
            }
            );
    }
    }

用户服务

    import { Injectable } from '@angular/core';
    import { Http, Headers } from '@angular/http';
    import 'rxjs/add/operator/map';
    import {MiaIP} from './miacontroller.service';

    @Injectable()
    export class UserService {
    private loggedIn = false;
    private user ={
    "event": "",
    "data": {
    "firstname": "",
    "lastname": "",
    "token": "",
    "privileges": []
    }
    };

    constructor(private http: Http) {
        this.loggedIn = !!sessionStorage.getItem('auth_token');
    }
    login(email, password) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');

        return this.http
            .post(MiaIP.MIA_ENDPOINT, JSON.stringify({ email, password }), {   headers: headers })
            .map(res => res.json())
            .map((res) => {
                if (!!res.event) {
                  sessionStorage.setItem('auth_token', res.data.token);
                  this.loggedIn = true;
                  this.user.data.privileges = res.data.privileges;
                  this.user.event = res.event;
                  this.user.data.firstname =res.data.firstname;
                  this.user.data.lastname =res.data.lastname;
                  this.user.data.token = res.data.token;
                  console.log('chat ist: ',    this.user.data.privileges.indexOf('get_dashboard') >=1);
                }
                return !!res.event;
            }
            );
    }

    logout() {
    sessionStorage.removeItem('auth_token');
    this.loggedIn = false;
    }
    isLoggedIn() {
        return this.loggedIn;
    }

    getUser(){
      return this.user;
    }

    getUsers(){
      return !!(this.user.data.privileges.indexOf('get_users') >=1)
    }
     getDashboard(){
      return !!(this.user.data.privileges.indexOf('get_dashboard') >=1)
    }
      getExperiment(){
      return !!(this.user.data.privileges.indexOf('get_experiment') >=1)
    }
      getChat(){
      return !!(this.user.data.privileges.indexOf('get_chat') >=1)
    }
      getOverview(){
      return !!(this.user.data.privileges.indexOf('get_overview') >=1)
    }
      getMyProfile(){
      return !!(this.user.data.privileges.indexOf('get_myprofile') >=1)
    }
      getScheduling(){
      return !!(this.user.data.privileges.indexOf('get_scheduling') >=1)
    }
    }

聊天组件

    import { Component, OnInit } from '@angular/core';

    @Component({
    selector: 'chat',
    templateUrl: 'chat.component.html',
    styleUrls: ['chat.component.scss']
    })
    export class ChatComponent{
    }

1 个答案:

答案 0 :(得分:2)

当用户点击地址栏上的输入时,它将触发页面重新加载,因此所有应用程序将重新初始化是正常的。 (如果你使用#has urls会有一些例外,但我不会这样做)

您可能希望将登录信息存储在cookie或localstorage中。所以它与Angular2并不完全相关。