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

问题描述

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

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

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

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.

问题:

Problem:

我可以在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.

在localhost中，登录后在服务器上的BUT中，但是我无法在应用程序中的页面之间导航.一切都出错了，我只有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中的提供程序数组中:

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:

{ provide: LocationStrategy, useClass: HashLocationStrategy },

{ provide: LocationStrategy, 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屋！