Angular 2 与 Auth0 路由错误 404

Question

我在我的 Angular 2 应用程序中使用 Auth0 身份验证。

我的应用程序运行在本地主机上一切正常，但是当我运行它在服务器（在我的域上）上时，我卡住了。

我的问题似乎出在路线上，但我所知道的是：我猜。

问题：

我可以在我的 Angular 应用程序中使用 Auth0 进行登录（没问题，无论是在本地主机还是在服务器上 - 也是注销）。登录后，应用程序重定向到我的控制页面，也没有问题，在应用程序内部我有菜单，我的其他页面及其路由等。

在本地主机上可以，但是登录后在服务器上我无法在我的应用程序的页面之间导航。一切都出错了，我只有一个 404 页面（即使我只是刷新）。

我也在使用 JQuery 和 Materialise 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 中的提供商数组：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

一旦你添加了它，你就可以按照下面的指南正确地使用 auth0 实现哈希路由（如果你使用的是更新版本的 ng2，请使用解决方法 #2）：

Angular 2 与 Auth0 路由错误 404

Angular 2 with Auth0 routing error 404

authentication

typescript

auth0

angular