带有 Auth0 路由错误 404 的 Angular 2答案

【问题标题】：Angular 2 with Auth0 routing error 404带有 Auth0 路由错误 404 的 Angular 2
【发布时间】：2017-08-31 06:57:18
【问题描述】：

我在 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>

谢谢！

【问题讨论】：

哦，我想我刚刚理解了你的问题......你在运行什么网络服务器？
请在问题本身的minimal reproducible example 中提供所有相关代码，而不仅仅是在第三方网站上。
Mike McCaughan 我添加了它，感谢您的警告。我希望这可以帮助更多在代码中遇到相同问题的人。问题解决了 Jack Clancy。
@PauloTokarskiGlinski 很高兴为您提供帮助 :)

标签： angular authentication typescript auth0

【解决方案1】：

我相信我在我的 ng2 应用程序中实现 Auth0 时遇到了类似的问题。它与您实现路由的方式有关。您将需要使用HashLocationStrategy. 这需要将其添加到app.module.ts 中的提供程序数组中：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

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

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

【讨论】：