如何在AngularJS SPA應用程序中處理瀏覽器刷新？

Question

我的AngularJS應用程序使用

• UI路由器
• index.html文件
• 所有登錄和數據調用都轉到ASP.NET Web控制器，其URL以/ api / xxx開頭。

當用戶進入myapp.com然后服務器index.html這就是我想要的。 當用戶現在選擇該頁面上的鏈接時，ui-router會在index.html中顯示相應的模板，瀏覽器URL欄會正確顯示以下地址：

myapp.com/home
myapp.com/home/overview
myapp.com/city
myapp.com/city/london

請注意，我的配置設置如下：

.config([
    '$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider',
    function (
        $httpProvider, $locationProvider, $sceProvider, $stateProvider) {
        $sceProvider.enabled(false);
        $locationProvider.html5Mode(true);

如果用戶現在點擊刷新，那么瀏覽器會忘記它在index.html上並嘗試查找網頁：myapp.com/city/london等當然不存在。 然后它會顯示一個錯誤頁面，說明該頁面不存在。

我該如何處理這種情況？ 我希望用戶點擊myapp.com/city進行刷新，最好回到myapp.com/city

Answer 1

編輯

當您使用帶有角度的HTML5模型時，您必須告訴您的服務器如何處理請求如果您到達其中一條路線，例如，如果您嘗試訪問myapp.com/city，您將收到錯誤，因為服務器正在運行在服務器的根目錄中查找不在那里的city.html頁面。 如果您從應用程序中導航到該路線它將正常工作，但如果您將其復制並粘貼到瀏覽器地址欄中，您將獲得404，因為服務器不了解如何訪問city.html。 一個簡單的解決方法是避免使用HTML5路由模式。 根據角度文檔，您需要進行一些URL重寫，以使您的服務器了解如何路由到這些頁面：

來自文檔 ：

使用HTML5模式需要在服務器端重寫URL，基本上你必須重寫所有鏈接到應用程序的入口點（例如index.html）

您還可以在此處查看 ，此答案討論了如何使HTML5路由與您的服務器一起使用。

Answer 2

當用戶刷新應用程序時，您可以引導他們登錄頁面或默認頁面。 這可以通過以下代碼完成。

app.run(['$location', function ($location) {
    $location.path('/login');
}]);