로그인 성공 후 기본 페이지로 리디렉션되지 않음 로그인이 실패했습니다. 로그인 2가

Question

로그인이 성공했을 때 로그인을 시도했지만 기본 페이지로 이동하여 로그인하지 않으면 authguard

에서이 내 로그인 구성 요소 HTML입니다

<div class="d-flex justify-content-center align-items-center height-full"> 
<md-card class="force-login-wrapper align-self-center text-center"> 
    <div> 
     <div> 
      <div class="login-logo justify-content"> 
       <img src="assets/img/logo.svg" class="mb-4"> 
       <p>Please enter your user information</p> 
      </div> 
     </div> 
     <form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate> 
      <div> 
       <md-input-container class="mggn-b-po full-wid"> 
        <input #userEmail mdInput placeholder="E-Mail" type="text" formControlName="email"> 
       </md-input-container> 
       <div [hidden]="email.valid || email.pristine" class="alert alert-danger">Please enter a valid email format</div> 
       <md-input-container class="mggn-b-po full-wid"> 
        <input mdInput placeholder="Password" type="password" formControlName="password"> 
       </md-input-container> 
       <div [hidden]="password.valid || password.pristine" class="alert alert-danger">Password must contain 6 or more characters</div> 
       <!-- <div class="row"> 
        <div class="col-md-6"> 
         <md-checkbox class="remember-me">Remember Me</md-checkbox> 
        </div> 
       </div> --> 
       <div> 
        <button class="bg-primary btn-block mb-12" md-raised-button type="submit" [disabled]="!myForm.valid">SIGN IN</button> 
       </div> 
       <div style="margin-top: 20px"> 
        <a [routerLink]="['/forgot-password']">Forgot Password?</a> 
        <p>Don't have an account? <a [routerLink]="['/register']" class="mat-text-primary">Click here to create one</a></p> 
       </div> 
      </div> 
     </form> 
    </div> 
</md-card> 

**이 로그인 구성 요소 TS **

입니다 16,

"use strict"; 

import { Component, OnInit ,ViewEncapsulation, AfterViewInit, ViewChild, ElementRef, Renderer} from '@angular/core'; 
import { Router } from "@angular/router"; 
import { ReactiveFormsModule, FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; 
import {AuthService} from '../../auth/auth.service'; 
import {ToastsManager} from 'ng2-toastr'; 
import {User} from '../../auth/user.model'; 

@Component({ 
    selector: 'ms-login-session', 
    templateUrl:'./login-component.html', 
    styleUrls: ['./login-component.scss'], 
    encapsulation: ViewEncapsulation.None, 
}) 
export class LoginComponent implements OnInit, AfterViewInit { 

    myForm: FormGroup; 
    email: FormControl; 
    userId: string; 
    password: FormControl; 
    @ViewChild('userEmail') userEmail: ElementRef; 
    constructor(
    private fb: FormBuilder, 
    private authService: AuthService, 
    private router: Router, 
    private toastr: ToastsManager, 
    private renderer: Renderer 
) { } 
    ngOnInit() { 
    this.email = new FormControl('', [Validators.required, this.emailValidator]); 
    this.password = new FormControl('', [Validators.required, Validators.minLength(6)]); 

    this.myForm = this.fb.group({ 
     email : this.email, 
     password: this.password 
    }); 

    // check if the user is logged in while trying to access the login page, if the user is logged in, we redirect him to the form page 
    if (this.authService.isLoggedIn()) { 
     this.toastr.info('You are already logged in'); 
     this.router.navigate(['/']); 
    } 
    } 

    ngAfterViewInit() { 
    setTimeout(() => { 
     this.renderer.invokeElementMethod(this.userEmail.nativeElement, 'focus', []); 
    }, 50); 
    } 

    // submit the login form with the user credentials and navigate the user to the index page of our app 
    onSubmit() { 
    const user = new User(this.myForm.value.email, this.myForm.value.password); 
    this.authService.signin(user) 
     .subscribe(
     data => { 
      // if the user credentials are correct, set the localStorage token and userId, 
      // we need these info in order to do stuff later when the user is signed in and verified 
      localStorage.setItem('id_token', data.token); 
      localStorage.setItem('userId', data.user._id); 
      localStorage.setItem('email', data.user.email); 
      localStorage.setItem('role', data.user.role[0]); 
      // navigate user to index page of our app 
      this.router.navigate(['/']); 

      // display toastr success message pop up to inform the user that he logged in successfully 
      this.toastr.success('You have been logged in!'); 
     }, 
     error => console.log(error) 
    ); 

    } 

    // input validator to check if the email entered by the user is actually text in an email form 
    emailValidator(control) { 
    let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i; 

    if (!EMAIL_REGEXP.test(control.value)) { 
     return {invalidEmail: true}; 
    } 
    } 

} 

이 아마 여기에 Authguard하고는 늘 로그인 후 메인 페이지로 리디렉션 발생하는 문제

import {Injectable} from '@angular/core'; 
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router'; 
import {Observable} from 'rxjs'; 
import {AuthService} from './auth.service'; 
import {ToastsManager} from 'ng2-toastr'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 

    constructor(private authService: AuthService, private router: Router, private toastr: ToastsManager) { 
    } 

    // we check if the user is logged in or not 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
    // user is actually logged in 
    if (this.authService.isLoggedIn()) { 
     return true; 

     // user is not logged in, return the user to the login page 
    } else { 
     this.router.navigate(['/login']); 
     this.toastr.error('Please login first'); 
    } 
    } 
} 

이것은 인증 서비스

import {Injectable} from '@angular/core'; 
import {Headers, Response} from '@angular/http'; 
import {User} from './user.model'; 
import {Observable} from 'rxjs'; 
import 'rxjs/operator/map'; 
import 'rxjs/operator/catch'; 
import {ToastsManager} from 'ng2-toastr'; 
import {ErrorService} from '../errorHandler/error.service'; 
import {Reset} from './password.model'; 
import {AuthHttp, tokenNotExpired} from 'angular2-jwt'; 
import {AUTH_API_URL} from '../config/config'; 

@Injectable() 

export class AuthService { 
    constructor(private authHttp: AuthHttp, private errorService: ErrorService, private toastr: ToastsManager) { 
    } 

// sending request to back end to login the user 
    signin(user: User) { 
    const body = JSON.stringify(user); 
    const headers = new Headers({ 
     'Access-Control-Request-Origin': 'http://localhost:3000', 
     'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept', 
     'Access-Control-Allow-Methods': 'GET, PUT, POST, PATCH, DELETE, OPTIONS', 
     'Content-Type': 'application/json'}); 
    return this.authHttp.post(`${AUTH_API_URL}/login`, body, {headers: headers}) 
     .map((response: Response) => response.json()) 
     .catch((error: Response) => { 
     this.errorService.handleError(error.json()); 
     return Observable.throw(error.json()); 
     }); 
    } 
logout() { 
    localStorage.clear(); 
    this.toastr.info('You have been logged out'); 
    } 

    // check if the user is logged in or not, if token is expired, token is deleted from localstorage 
    isLoggedIn() { 
    if (!tokenNotExpired()) { 
     localStorage.clear(); 
    } 
    return tokenNotExpired(); 
    } 
} 

이며, 다음은 라우팅 모듈입니다.

"use strict"; 

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { MainComponent } from './main/main.component'; 
import { DashboardComponent } from './dashboard/dashboard-v1/dashboard.component'; 
import { AddappComponent } from './myapp/addapp/addapp.component' 
import { AddbookComponent } from './mybook/addbook/addbook.component'; 
import { MymediaComponent } from './mymedia/mymedia.component'; 
import { MybookComponent } from './mybook/mybook.component'; 
import { MyappComponent } from './myapp/myapp.component'; 
import { LoginComponent } from './session/login/login.component'; 
import { AdminLoginComponent } from './admin/login/login.component'; 
import { RegisterComponent } from './session/register/register.component'; 
import { ForgotPasswordComponent } from './session/forgot-password/forgot-password.component'; 
import { LockScreenComponent } from './session/lockscreen/lockscreen.component'; 
import { AdminComponent } from './admin/admin.component'; 
import { AdminGuard } from './core/auth/adminlogin.guard' 
import {AuthGuardService} from './auth/authguard.service'; 
const appRoutes: Routes = [ 
    { 
     path: 'login', 
     component: LoginComponent, 
    },{ 
     path: 'register', 
     component: RegisterComponent, 
    },{ 
     path: 'forgot-password', 
     component: ForgotPasswordComponent, 
    },{ 
     path: 'lockscreen', 
     component: LockScreenComponent, 
    },{ 
     path: 'adminlogin', 
     component: AdminLoginComponent 
    },{ 
     path: 'admin', 
     component:AdminComponent, 
     canActivate: [AdminGuard] 
    },{ 
     path: '', 
     component: MainComponent, 
     canActivate: [AuthGuardService], 
     pathMatch: 'full', 
     children: [ 
      { path: '', component: DashboardComponent }, 
      { path: 'dashboard', component: DashboardComponent }, 
      { path: 'myapps', component:MyappComponent }, 
      { path: 'myapps/addapp', component:AddappComponent }, 
      { path: 'mybooks', component:MybookComponent }, 
      { path: 'mybooks/addbook', component:AddbookComponent }, 
      { path: 'mymedia', component:MymediaComponent }, 
     ] 
    },{ 
     path: '**', 
     redirectTo: "dragndrop/dragula" 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

나는 로그인 성공적인을 그냥 라우팅 모듈

처럼 메인 페이지로 리디렉션 할하지만 백엔드와 토스트 쇼의 성공에서 성공을 받았을 때 다음 못해 재와 토스트 먼저 로그인하시기 바랍니다 다음 말했다 이것은 인증 시험원에서오고 있습니다

Answer 1

나는 tokenNotExpired()을 사용한다는 사실을 기반으로 angular2-jwt을 사용한다고 가정합니다. docs에서

우리가 볼 수

참고 : tokenNotExpired('token_name') : tokenNotExpired 기본적으로 토큰 이름이, 전 전달되지 않는 토큰 이름 token입니다 가정합니다.

그래서 당신이 localStorage에 토큰을 저장하는 것을 id_token입니다 :

localStorage.setItem('id_token', data.token); 

그렇게 하나 token로 이름을 변경하거나 tokenNotExpired에 매개 변수로 id_token를 전달합니다.