带有 Auth0 路由错误 404 的 Angular 2

Question

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

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

我的问题似乎出在路线上，但我所知道的一切都是:我猜。

问题:

我可以在我的 Angular 应用程序中使用 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 时遇到了与您类似的问题。它与您实现路由的方式有关。您将需要使用 HashLocationStrategy。 这需要将其添加到 app.module.ts 中的提供程序数组中:


{
提供:位置策略，
使用类:HashLocationStrategy
},


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

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