带有 Auth0 路由错误 404 的 Angular 2 [英] Angular 2 with Auth0 routing error 404

问题描述

我在 Angular 2 应用程序中使用了 Auth0 身份验证.

I'm using Auth0 authentication in my Angular 2 application.

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

Everything OK in my application running localhost, but when I run it on Server (on my domain) I got stuck.

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

My problems seems to be in the routes, but everything I know is: I guess.

问题:

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

I can do the login using the Auth0 in my Angular app (no problem, both localhost and on server - also the logout). After the login, the application redirects to my Control Page, no problem too, and inside the application I have the menu, my other pages with their routes, etc.

在本地主机好的，但登录后在服务器上我无法在我的应用程序中的页面之间导航.一切都出错了，我得到了一个 404 页面(即使我只是刷新).

In localhost OK, BUT on Server after the login I can't navigate betwen the pages in my app. Everything goes wrong and I just got a 404 page (even when I just refresh).

我也在使用 JQuery 和 Materialize CSS.JQuery 没有加载，在我刷新它的加载和效果之后.

I'm also using JQuery and Materialize CSS. The JQuery doesn't load, after I refresh it's load and the effects work.

代码:

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>

谢谢！

Thanks!

推荐答案

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

I believe I ran into a similar issue to you when implementing Auth0 in my ng2 app. It has to do with the way you implemented routing. You will need to use HashLocationStrategy. This requires adding this to your providers array in app.module.ts:

<代码>{提供:位置策略，useClass: HashLocationStrategy},

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

Once you have added this, you can follow the guide below to correctly implement hash routing with auth0 (use workaround #2 if you're using a more recent version of ng2):

如何使用带有用于用户登录的 Auth0 Lock 小部件的 HashLocationStrategy

这篇关于带有 Auth0 路由错误 404 的 Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！