Question

我正在使用前端的Angular 7和后端的NodeJS，MongoDB和ExpressJS构建一个Web应用程序。只要我与应用程序交互以进行导航，该应用程序便会按预期运行，但是当我手动键入路径时，似乎并没有击中该路线的组件。它在本地运行良好，但在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在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路由不正确。手动键入时，不会击中我的任何组件。

Answer 1

对于不匹配的路由路径，路由器配置应包括以下内容。

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

手动键入url时，角路由的行为奇怪

1 个答案: