Question

所以，我也升级到了Angular2 Final。我做了迁移项目的步骤，以便将所有内容都移除。我得到零错误，它验证。但是，验证后会出现问题。当它重定向回页面时，它没有获得那些美味的身份验证数据。它表现得像我没有登录。这发生在本地，并在firebase托管。我仔细检查过我没有阻止cookie。我将认证选项剥离到了facebook。它只是不起作用。在决赛之前还可以。我上次使用的版本是RC5。

我正在使用Typescript 2.0.2。

我的app.module看起来像这样：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule, ApplicationRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {CollapseDirective, DropdownDirective, DropdownToggleDirective, DropdownMenuDirective} from 'ng2-bootstrap';
import {
    FIREBASE_PROVIDERS,
    defaultFirebase,
    AngularFire,
    AuthMethods,
    AuthProviders,
    firebaseAuthConfig, AngularFireModule
} from 'angularfire2';
import {RoomlyNavbarComponent} from './shared/roomly-navbar/roomly-navbar.component';
import {RoomlyRoomsComponent} from './roomly-rooms/roomly-rooms.component';
import {RoomlyHomeComponent} from './roomly-home/roomly-home.component';
import {
    routing,
    appRoutingProviders
} from './app.routes';
import {RoomlyRoomComponent} from './roomly-room/roomly-room.component';
import {RoomlyPhotoUploaderComponent} from './roomly-photo-uploader/roomly-photo-uploader.component';
import {RoomlyItemComponent} from './roomly-item/roomly-item.component';
import {RoomlyBuildingComponent} from './roomly-building/roomly-building.component';
import {RoomlyBuildingsComponent} from './roomly-buildings/roomly-buildings.component';
import {BuildingFormComponent} from './building-form/building-form.component';

const myFirebaseConfig = {
    apiKey: "REMOVED",
    authDomain: "REMOVED",
    databaseURL: "REMOVED",
    storageBucket: "REMOVED",
};

const myFirebaseAuthConfig = {
    provider: AuthProviders.Facebook,
    method: AuthMethods.Redirect
};

@NgModule({
    declarations: [
        AppComponent,
        CollapseDirective,
        DropdownDirective,
        DropdownToggleDirective,
        DropdownMenuDirective,
        RoomlyNavbarComponent,
        RoomlyRoomsComponent,
        RoomlyRoomComponent,
        RoomlyHomeComponent,
        RoomlyPhotoUploaderComponent,
        RoomlyItemComponent,
        RoomlyBuildingComponent,
        RoomlyBuildingsComponent,
        BuildingFormComponent,
    ],
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        routing,
        AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig)
    ],
    providers: [appRoutingProviders],
    entryComponents: [AppComponent],
    bootstrap: [
        AppComponent,
        RoomlyNavbarComponent
        ]
})
export class AppModule {

}

我的app.component看起来像这样。我正在使用路线，所以它非常裸露。它只会加载包含router-outlet和导航栏的页面：

import { Component } from '@angular/core';
import * as firebase from 'firebase';
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  constructor(public af: AngularFire) {
  }
}

最后，实际登录的主页如下所示：

import {Component, OnInit} from '@angular/core';
import {AngularFire, AuthProviders, AuthMethods} from 'angularfire2';
import {AuthUser} from '../shared/AuthUser';

@Component({
    selector: 'app-roomly-home',
    templateUrl: 'roomly-home.component.html',
    styleUrls: ['roomly-home.component.css']
})
export class RoomlyHomeComponent implements OnInit {

    ngOnInit() {
    }

    user = {};
    authUser: AuthUser = new AuthUser('', '');
    loggedin: boolean;

    constructor(public af: AngularFire) {
        this.af.auth.subscribe(auth => console.log('hello ', auth));
        this.af.auth.subscribe(user => {
            if (user) {
                // user logged in
                this.user = user;
                this.loggedin = true;
            }
            else {
                // user not logged in
                this.user = {};
                this.loggedin = false;
            }
        });
    }

    login() {
        this.af.auth.login();
    }

    loginFacebook() {
        this.af.auth.login({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup
        });
    }

    loginGoogle() {
        this.af.auth.login({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup
        });
    }

    loginTwitter() {
        this.af.auth.login({
            provider: AuthProviders.Twitter,
            method: AuthMethods.Popup
        });
    }

    logout() {
        this.af.auth.logout();
    }


}

我不确定RC5和Final之间发生了什么变化导致它失败。如果有帮助，这是我的package.json文件：

{
  "name": "Roomly Home Inventory",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angularfire2": "^2.0.0-beta.4",
    "core-js": "^2.4.1",
    "firebase": "^3.4.0",
    "ng2-bootstrap": "^1.1.4",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.14",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

有没有其他人遇到这个？

Answer 1

好的，修好了。这有两个步骤。

升级到angularfire2@2.0.0-beta.5-preview
npm install @types/request@0.0.30
利润。

这解决了问题，现在一切正常。：）

如何使用Firebase进行身份验证以使用Angular2 FINAL？

1 个答案: