Auth0 라우팅 오류가있는 각도 2 404

Question

내 Angular 2 응용 프로그램에서 Auth0 인증을 사용하고 있습니다.

내 응용 프로그램에서 localhost를 실행해도 문제가 없지만 서버에서 실행할 때 (내 도메인에서) 멈추었습니다.

내 문제는 경로에있는 것처럼 보이지만 내가 아는 모든 것 : 추측 컨데.

문제 :

내가 (로컬 호스트와 서버에 모두 아무 문제, - 또한 로그 아웃) 내 코너 응용 프로그램에 Auth0를 사용하여 로그인 할 수 있습니다. 로그인 후에 응용 프로그램은 제 제어 페이지로 리다이렉트합니다. 아무런 문제가 없습니다. 응용 프로그램 내에서 메뉴가 있고 경로가있는 다른 페이지가 있습니다.

로컬 호스트에서는 로그인 후에도 서버에서 가능합니다. 내 앱에서 페이지 간을 이동하지 마십시오. 모든 것이 잘못되어 방금 404 페이지가 생깁니다 (새로 고침을해도).

저는 또한 JQuery와 Materialize CSS를 사용하고 있습니다. JQuery는로드하지 않고 새로 고치면 효과가 작동합니다.

코드 :

app.routing.ts :

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

import { AuthGuard } from './auth/auth.guard'; 

import { HomeComponent } from './components/home/home.component'; 
import { PainelComponent } from './components/painel/painel.component'; 
import { ReunioesComponent } from './components/reunioes/reunioes.component'; 
import { AssociadosComponent } from './components/associados/associados.component'; 
import { CalendarioComponent } from './components/calendario/calendario.component'; 
import { TesourariaComponent } from './components/tesouraria/tesouraria.component'; 
import { DocumentosComponent } from './components/documentos/documentos.component'; 

const appRoutes: Routes = [ 
    { 
     path: '', 
     component: HomeComponent 
    }, 
    { 
     path: 'painel', 
     component: PainelComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'associados', 
     component: AssociadosComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'calendario', 
     component: CalendarioComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'reunioes', 
     component: ReunioesComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'tesouraria', 
     component: TesourariaComponent, 
     canActivate: [AuthGuard] 
    }, 
    { 
     path: 'documentos', 
     component: DocumentosComponent, 
     canActivate: [AuthGuard] 
    } 
]; 

export const appRoutingProviders: any[] = []; 
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: false}) 

auth.service.ts :

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { tokenNotExpired } from 'angular2-jwt'; 

declare var Auth0Lock: any; 

@Injectable() 
export class Auth { 
    lock = new Auth0Lock('SECRET', 'SECRET.auth0.com', {}); 

    constructor(private router: Router) { 
     this.lock.on("authenticated", (authResult) => { 
      this.lock.getProfile(authResult.idToken, (err, profile) => { 
       if(err) 
        throw new Error(err) 

       localStorage.setItem('profile', JSON.stringify(profile)); 
       localStorage.setItem('id_token', authResult.idToken); 

       this.router.navigate(['/painel']) 
      }) 
     }); 
    } 

    public login() { 
     this.lock.show() 
    } 

    public authenticated() { 
     return tokenNotExpired() 
    } 

    public logout() { 
     localStorage.removeItem('id_token'); 
     localStorage.removeItem('profile') 
    } 
} 

sidenav.partial.html :

<ul id="slide-out" class="side-nav fixed"> 
    <li><a href="/associados"><i class="material-icons">group</i>Associados</a></li> 
    <li><a href="/calendario"><i class="material-icons">event</i>Calendário</a></li> 
    <li><a href="/painel"><i class="material-icons">new_releases</i>Calendário Próximo</a></li> 
    <li><a href="/reunioes"><i class="material-icons">forum</i>Reuniões</a></li> 
    <li><a href="/tesouraria"><i class="material-icons">monetization_on</i>Tesouraria</a></li> 
    <li><a href="/documentos"><i class="material-icons">attach_file</i>Documentos</a></li> 
    <li><br></li> 
    <li class="show-on-med-and-down hide-on-large-only"> 
     <a href="#!" (click)="auth.logout()"><i class="material-icons">close</i>Sair</a> 
    </li> 
</ul> 

감사합니다!

Answer 1

내 ng2 앱에서 Auth0을 구현할 때 비슷한 문제가 발생했다고 생각합니다. 라우팅을 구현하는 방식과 관련이 있습니다. 이 추가되면

{ provide: LocationStrategy, useClass: HashLocationStrategy },

, 당신은 가이드를 따를 수 아래 제대로 (auth0과 라우팅을 사용하여 해결 # 2 해시를 구현하기 위해 : 당신은이 app.module.ts에 제공 배열이 추가 필요 HashLocationStrategy.를 사용해야합니다 당신이 NG2의 최신 버전)을 사용하는 경우 :

How to use the HashLocationStrategy with the Auth0 Lock widget for user login