Question

我正在使用MEAN堆栈构建一个站点，总体而言，这是我的结构：

根
- 应用
  - AUTH
    - auth.routes.ts
    - auth.service.ts
  - app.component.html
  - app.component.ts
  - app.routing.ts

在我的app.routung.ts我有这段代码：

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/main_url', pathMatch: 'full' },
    { path: 'main_url', component: MainComponent, canActivate: [AuthenticationGuard] },
    { path: 'cars', component: CarsComponent },
    { path: 'auth', component: AuthenticationComponent, children: AUTH_ROUTES },
];

然后，在我的app.js主文件中，我有这些路径：

app.use('/main_url', mainRoutes);
app.use('/cars', carRoutes);
app.use('/', appRoutes);

appRoutes的内容是：

var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
    res.render('index');
});

module.exports = router;

index文件，在左侧边栏上呈现带有菜单的html。在内容部分中，我有<my-app>Loading...</my-app>，它会加载app.component.ts及其中的所有逻辑。

这里的问题是，当我不希望将其包含在我的index.html内时，如何通过登录页面保护我的<my-app>Loading...</my-app>主路线？

我做错了什么？或者有一个很好的方法可以做到这一点？

更新

我的问题的简要说明：

我有一个节点路由器，只有get方法，然后被重定向到index：

... code ...
res.render('index');

index.html是一个带有标题，侧边栏菜单，页脚和内容的模板。在内容中，我有：<my-app>Loading...</my-app>，这一行触发我的角度组件，它使用我之前发布的角度路径（APP_ROUTES）。

此时此操作正常，但是，当用户未登录并将其发送到完全分隔的{{1}时，如何阻止从我的index.html触发res.render('index')页面/代码？我想我必须改变一些东西，因为总是我会被重定向到索引，无论如何，因为它是切入点。

Answer 1

请尝试使用Angular的HashLocationStrategy，它在URL中放置一个'＃'来分隔服务器响应的位和Angular响应的位（粗略地说）。

Ng-book给出了很好的描述，其中包括

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    provide(LocationStrategy, {useClass: HashLocationStrategy})
  ]

另请参阅此SO question的答案，其中提及服务器配置（作为替代方案）。

确保您的服务器配置为支持HTML5 pushState。这只是表示服务器返回index.html以查询未知的请求资源。

这是另一个很好的参考Location Strategies in Angular Router，可能是我能找到的最好的描述问题。

Angular2 / 4独立登录页面

1 个答案: