2016-11-18 76 views
1

如果我去http://localhost:3000開始我的項目,我沒有登錄,它會去http://localhost:3000/login,但我希望它去http://localhost:3000/#/login。有沒有辦法做到這一點,除非我在角度前端重定向?還是我做錯了?使用Angular ui路由器重定向到Express

,如果我能做到這一點,在快遞後端這將是理想的

我的角路由文件

$stateProvider 
.state('app', { 
    abstract: true, 
    url: '/app', 
    templateUrl: '/layout' 
}) 
.state('app.dashboard', { 
    url: '/dashboard', 
    templateUrl: '/dashboard', 
    ncyBreadcrumb: { 
     label: 'Dashboard', 
     description: '' 
    } 
}) 
.state('login', { 
    url: '/login', 
    templateUrl: '/login', 
    ncyBreadcrumb: { 
     label: 'Login' 
    } 
}) 

我快速路由文件

function isLoggedIn(req, res, next) { 
    if (req.isAuthenticated()) { 
     return next(); 
    } 
    return res.redirect('/login'); //this goes to login but doesn't load properly 
    //return res.redirect('/#/login'); //does not work 
} 

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

編輯:我在加入這個回覆@家健潤

router.get('/#/login', function (req, res) { 
    return res.render('login'); 
}); 

,改變isLoggedIn功能去:

return res.redirect('/#/login') 

但它說,它的示數說過多的重定向CUS它沒有找到它。

編輯2:

對不起,我不知道如果我明白你想說什麼?現在例如..如果沒有isLoggedIn檢查,它會自動去儀表板,因爲這裏的代碼行在這裏我的url是http://localhost:3000/#/app/dashboard自動:

$ urlRouterProvider.otherwise('/ app/dashboard 「);

但我沒有路線在我的快車方/app/dashboard具體。我已經工作正常的儀表板路由是這樣:

router.get('/dashboard', function (req, res) { 
    return res.render('dashboard'); 
}); 

回答

0

在你router.get(),你匹配'/'。 isLoggedIn重定向響應/#/login,它也匹配相同的'/',然後你會得到一個圓圈。

之所以res.redirect('/login');作品是你必須處理「/登錄」,一個路由器,該路由器停止路由器鏈要router.get('/', isLoggedIn, fn)

所以,你需要添加一個新的路由器規則來處理/#/login

更新


研究後,我發現

Browser doesn't send hash part of url to the server, so express.js cannot know about it.

其中我訪問http://127.0.0.1:3000/aaa#/login

var url = require('url'); 
var url_parts = url.parse(req.url, true); 

此代碼演示試驗驗證表明url_parts

{ 
    "protocol":null, 
    "slashes":null, 
    "auth":null, 
    "host":null, 
    "port":null, 
    "hostname":null, 
    "hash":null, 
    "search":"", 
    "query":{}, 
    "pathname":"/aaa", 
    "path":"/aaa", 
    "href":"/aaa" 
} 

因此,有沒有一個正確的選擇匹配#hash。 所以你的情況,你應該在URL添加一個真實的路徑,然後匹配它,例如http://127.0.0.1:3000/homepage/#/login

+0

編輯OP。這是你的意思嗎? – user1189352

+0

抱歉,我無法理解您的評論。你能解釋更多嗎? – jiajianrong

+0

我編輯原來的帖子迴應你的答案,但我不能得到它的工作。是我在原來的文章中編輯過的,你試圖告訴我做什麼? – user1189352

0

假設你的主要途徑是/,它使主index.(html/ejs)

現在角ui路由器有3條路線。

/abc 
/xyz 
/abc/xyz 

所以,你需要創建快遞4路線,這使得index.(html/ejs)

如果你的ui-router包含app或其他常用名稱作爲路徑。

/app/abc 
/app/xyz 
/app/* 

然後檢查快遞路由器或中間件URL的正則表達式,如果它包含app然後渲染index.(html/ejs)

+0

爲您製作了「EDIT2」。仍然不確定我應該怎麼做才能使其工作 – user1189352

+0

以上解決方案的工作原理是,如果您是用戶html5推送狀態爲true(例如,http:// localhost:3000/app/dashboard),如果您使用'# ''然後用'/'加載一個路徑並加載'index.html',一旦它加載'/#/ app/dashboard'將通過角度ajax –

+0

呈現對不起,我還是不明白如何修復我談論的問題很不幸。也許你可以編輯你的回覆,告訴我 – user1189352

0

我的方法是通過啓用HTML 5模式來刪除/#

Docs

在你的路由器的文件,你可以這樣做:

app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) { 

    $locationProvider.html5Mode({ 
     enabled: true, 
     requireBase: true 
    }); 

    $stateProvider 
    .state 
    ... 

}); 

的index.html

<base href="/"> 

現在您可以訪問你的路沒有/#,無需改變服務器端。

+0

甜蜜會試試這個有點讓你知道,謝謝 – user1189352