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

问题描述

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

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

首先，在 CanActivate 守卫使用用户 JSON 对象检查本地存储并发现它为空后，用户重定向到/login" 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):用户"类型上不存在属性令牌".)

我的用户模型如下所示:

my user model looks like this:

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'));localStorage.setItem('currentUser', JSON.stringify(this.user)); 在第 39 行之后.

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屋！