Угловая маршрутизация ведет себя странно, когда URL вводится вручную - PullRequest
Новая
       14

Угловая маршрутизация ведет себя странно, когда URL вводится вручную

0 голосов
/ 20 декабря 2018

Я создаю веб-приложение, используя Angular 7 для внешнего интерфейса и NodeJS, MongoDB и ExpressJS для внутреннего интерфейса.Приложение работает так, как задумано, пока я взаимодействую с приложением для навигации, но когда я вручную набираю путь, кажется, что он не попадает в компонент для маршрута.Все работает хорошо локально, но не на Heroku.

Вот мой app-routing.module.ts: 

const routes: Routes = [{ 
  path: "login", 
  component : LoginComponent
  },
  {
  path: "registration", 
  component : SignupComponent
  },
  {
    path: "votes", 
    component : VotesComponent
  },
  {
    path: "votes/:website", 
    component : VoteComponent
  },
  { 
    path: "**", 
    redirectTo: "votes" 
  }
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes, { enableTracing: false})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Все мои маршруты в Express имеют префикс / api /, например: 

app.get('/api/votes', (req, res, next) => {
  const limit = parseInt(req.query.limit)
  db.getVotes(limit).then((votes) => {
    res.json(votes);
});

});

Я проверяю jwt следующим образом: 

app.use(
    checkJwt({ secret: process.env.JWT_SECRET }).unless({ path: [ 
              { url: "/api/authenticate", methods: ['POST'] }, 
              { url: "/api/votes", methods: ["GET"]}]})
);

app.use((err, req, res, next) => {
    if (err.name === 'UnauthorizedError') {
        res.status(401).send({ error: 'Not authorized.' });
    };
});

Мой призыв к голосованию выполняется следующим образом: 

private baseUrl = environment.apiUrl;

this.http.get<any[]>(`${this.baseUrl}/votes`, this.httpOptions))).subscribe(data => {
       this.data = data;
});

BaseUrl определяется следующим образом:the evironment.prod.ts: 

export const environment = {
  production: true,
  apiUrl: '/api'
};

Здесь возникает проблема.Если я перейду к развертыванию на Heroku и получу доступ к https://myurl.com, я перенаправлюсь на https://myurl.com/votes и увижу, что запрошенный URL равен https://myurl.com/api/votes,, так что все в порядке, и я получаю свой угловойприложение со всеми данными.Но если я вручную ввожу https://myurl.com/votes, я возвращаю JSON в браузере с ошибкой «Не авторизован», и я вижу, что запрошенный URL-адрес https://myurl.com/votes, вместо https://myurl.com/api/votes. Любойидеи что вызывает это?Кажется, что Angular не правильно его направляет.Когда он набирается вручную, он не попадает ни в один из моих компонентов.

1 Ответ

0 голосов
/ 20 декабря 2018

Для несоответствующего пути маршрута конфигурация маршрутизатора должна включать ниже единицы. 

{ 
    path: "", 
    component: "404NotFoundComponent" 
}
...