角度2與Auth0路由錯誤404

Question

我在Angular 2應用程序中使用Auth0身份驗證。

在我的應用程序中運行localhost的一切正常，但是當我在服務器上運行它（在我的域上）時，我卡住了。

我的問題似乎在路線上，但我知道的一切是：我猜。

問題：

我可以使用我的Angular應用程序中的Auth0進行登錄（沒問題，無論是本地主機還是服務器 - 還有注銷）。 登錄后，應用程序重定向到我的控制頁面，沒有問題，在應用程序內我有菜單，我的其他頁面及其路線等。

在localhost好了，但登錄后我在服務器上無法瀏覽我的應用程序中的頁面。 一切都出錯了，我剛剛得到一個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時，我遇到了類似的問題。 它與您實現路由的方式有關。 您將需要使用HashLocationStrategy. 這需要將其添加到app.module.ts的providers數組中：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

添加完成后，您可以按照以下指南正確實現auth0的哈希路由（如果您使用的是更新版本的ng2，請使用解決方法＃2）：

如何將HashLocationStrategy與Auth0 Lock小部件一起用於用戶登錄