0
나는 다음과 같은 문제가있다 :중포 기지 라우팅
-
: 내 등록 페이지로 이동합니다 중포 기지 인증에 의해 반환 약속을 사용할 때, 나는 두 페이지 대신 단지 내 등록 페이지를 동시에 표시 취득
:
- 프로파일 세부 사항 (적용된 CSS없이) 내 사회적 버튼 로그인 페이지
- 내 등록 페이지는 응용 프로그램 내 모듈의
버전을 원했다
Angular CLI: 1.6.0
Node: 8.6.0
OS: linux x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router
@angular/cdk: 5.0.1
@angular/cli: 1.6.0
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.1
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack-bundle-analyzer: 2.9.1
webpack: 3.10.0
그리고 login.component.ts의 코드 : 나는 무엇을 시도했다
export class LoginComponent implements OnInit {
...
constructor(private authService: AuthService, private router: Router) {}
...
loginWith(mode: string) {
return this.authService.loginWith(mode).then((data) => {
if(data.additionalUserInfo.isNewUser) {
this.router.navigate(['register', {mode: mode}]).catch(error => {
console.log("Navigate ERROR", error);
});
}
else {
this.router.navigate(['']);
}
});
}
그리고 auth.service.ts
import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { login, logout } from './auth.reducer';
@Injectable()
export class AuthService {
constructor(private afAuth: AngularFireAuth, private store: Store<any>) {}
public redirectUrl: string;
/**
* Logs in the user
* @returns {firebase.Promise<FirebaseAuthState>}
*/
loginWithEmailAndPassword(email: string, password: string) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password).then((data) => {
this.store.dispatch(login(data));
return data;
});
}
loginWith(mode : string) {
return this.afAuth.auth.signInWithPopup(new this.afAuth.auth[mode + 'AuthProvider']()).then((data) => {
this.store.dispatch(login(data));
return data;
});
}
의 코드 :
내 모든 애니메이션의 표시를 억제합니다.
,결과는 동일 :
직접 m 사이의 혼합 내 등록 페이지 OK, 내가 얻은 적이 있었다
Ngrx의사용을
loginWith(mode: string) {
this.router.navigate(['register', {mode: mode}]);
}
결과를 라우팅
최종 결과가 아니며 구성 요소의 동작을 확인하는 데 사용됩니다.
import { Store } from '@ngrx/store';
import { AuthService } from '../auth.service';
import { selectorAuth } from '../auth.reducer';
...
export class LoginComponent implements OnInit {
...
constructor(private authService: AuthService, private router: Router, private store: Store<any>) {}
ngOnInit() {}
loginWith(mode: string) {
this.store
.select(selectorAuth)
.subscribe(auth => {
if(auth.isAuthenticated) {
if(auth.payload.additionalUserInfo.isNewUser) {
this.router.navigate(['register', {mode: mode}]).catch(error => {
console.log("Navigate ERROR", error);
});
}
}
});
return this.authService.loginWith(mode);
}
...
}
결과는 KO했다 : 두 페이지 사이에 항상 믹스
내가 뭔가를 놓친 적이 있지만 내가 어디 있는지 무엇을, 그래서 누군가가 도울 수 있다면, 사전에 감사하지 않는 생각 .