Angular2属性在类型上不存在 [英] Angular2 Property does not exist on type

问题描述

我正在尝试在登录过程后获得连接的用户模型，

I am trying to get my connected user model after login process,

首先，在CanActivate Guard使用用户JSON对象检查本地存储并发现其为空之后，用户将重定向到"/登录" URL.

First the user is redirecting to "/login" URL after CanActivate guard checked the local storage with the user JSON object and found that it is null

然后，用户登录并重定向回根URL"/"， 在连接过程中，我使用的是AuthService，它将从服务器返回的用户对象保存在用户模型中

Then the user is logging in and redirect back to root URL "/", on the connecting process I'm using AuthService that save the user object that returned from the server in a user model

但我遇到此错误:

src/app/_guards/auth.guard.ts(12,48):类型用户"不存在属性令牌".)

我的用户模型如下:

export class User {
constructor(
    public email:string,
    public passowrd:string,
    public firstname:string,
    public lastname:string,
    public token:string
){}
}

和我的AuthService看起来像这样:

and my AuthService looks like this:

import { Injectable } from '@angular/core';
import { User } from "../_models/user";
import { Observable } from 'rxjs/Rx';
import { Http, Headers, Response } from '@angular/http';
import { Router } from "@angular/router";
import 'rxjs/add/operator/map';

@Injectable()
export class AuthenticationService {
  private user: User;

  constructor(private http: Http,private router:Router) {
    // set token if saved in local storage
    var currentUser = JSON.parse(localStorage.getItem('currentUser'));
    this.user = currentUser;
  }

  getUser(){
    return this.user;
  }

    login(email:string,password:string): Observable<boolean> {
        const body = JSON.stringify({ email: email, password: password });
        const headers = new Headers({
         'Content-Type' : 'application/json'
        });

        return this.http.get("https://test.firebaseio.com/users.json",{headers:headers})
            .map(
            (response: Response) => {

                // login successful if there's a token in the response
                let token = response.json() && response.json().token;
                if(token){
                    // set user object
                    this.user = response.json();

                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(this.user));

            // return true to indicate successful login
                    return true;
                } else {
                    // return false to indicate failed login
                    return false;
                }
                //return response.json();
            }
          );
    }

    logout(): void {
    // clear token remove user from local storage to log user out
    this.user = null;
    localStorage.removeItem('currentUser');
    this.router.navigate(['/']);
  }
}

这是我的警卫:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { AuthenticationService } from '../_services/index';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router,private authService:AuthenticationService) { }

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot): boolean {
        if (this.authService.getUser().token) {
            // logged in so return true
            return true;
        }

        this.router.navigate(['/login']);
        return false;
    }
}

推荐答案

您的登录方法不是静态的，这意味着您必须至少创建了AuthenticationService的一个实例后才能使用登录.

Your login method is not static, this means you can only use login after you have created at least one instance of the AuthenticationService.

您在构造函数中将currentUser设置为空.而且您登录后也不会更新它.

You set currentUser with nothing in the constructor. And you do not update it after you login.

要修复它，请添加:

this.user = JSON.parse(localStorage.getItem('currentUser')); 在第39行的localStorage.setItem('currentUser', JSON.stringify(this.user));之后.

this.user = JSON.parse(localStorage.getItem('currentUser')); after localStorage.setItem('currentUser', JSON.stringify(this.user)); on line 39.

即使我不喜欢它，也可能会解决它.

我最近编写了非常相似的代码，针对这个确切问题的解决方案是创建一个公共方法，例如:

I made a very similar code recently and my solution for this exact problem was to create a public method such as:

  public getAuthKey() {
    return localStorage.getItem('currentUser');
  }

这样，如果有一个值，您将始终确保获得正确的值.

This way you will always make sure that you get the right value if there is one.

这篇关于Angular2属性在类型上不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！