Angular2 / 4獨立登錄頁面

Question

我正在用MEAN堆棧構建一個站點，總體來說這是我的結構：

• 根
  • 應用程式
    • 認證
      • auth.routes.ts
      • 驗證服務
    • app.component.html
    • app.component.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及其所有邏輯。

這里的問題是，當我不想將它包含在我的<my-app>Loading...</my-app>時，如何通過登錄頁面保護我的index.html主路徑？

我做錯什么了嗎？ 還是有一個很好的方法可以做到這一點？

更新

我的問題的簡要說明：

我有一個節點路由器，它只有一個get方法，然后重定向到index ：

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

index.html是一個帶有頁眉，側邊欄菜單，頁腳和內容的模板。 在內容中，我具有以下內容： <my-app>Loading...</my-app> ，此行觸發我的角度組件，該組件使用我之前發布的Angular Routes（APP_ROUTES）。

所有這些都可以正常工作，但是，當用戶未登錄並將其發送到完整的單獨的login.html頁面/代碼時，如何防止從res.render('index')觸發index.html呢？ ？ 我認為我必須更改某些內容，因為無論如何我總是要重定向到索引，因為這是切入點。

Answer 1

請嘗試Angular的HashLocationStrategy，它在URL中放置一個“＃”以將服務器響應的位與Angular響應的位（粗略地講）分開。

Ng書給出了很好的描述，要領是

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

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

另請參閱此SO問題的答案，其中提到服務器配置（作為替代）。

確保您的服務器配置為支持HTML5 pushState。 這僅意味着服務器返回index.html以請求對未知資源的請求。

這是Angular Router中的另一個很好的參考位置策略 ，可能是我發現的最好的描述問題的方法。