AngularJS + Django：URL 刷新或直接访问未正确加载

Posted 2023-02-24

【中文标题】AngularJS + Django：URL 刷新或直接访问未正确加载

【英文标题】：AngularJS + Django: URL refresh or direct access not loading correctly

【发布时间】：2015-10-13 17:15:37

【问题描述】：

我们将 AngularJS 嵌入到我们的 Django 应用程序中，URL 路由由 AngularJS ui-router 处理。使用 ui-sref 在局部之间导航并在应用程序内四处点击，一切正常。

return $stateProvider.state('root.dashboard', 
        abstract: true,
        url: 'dashboard/'
      ).state('root.dashboard.profile', 
        url: 'profile/',
        views: 
          '@': 
            templateUrl: Urls['dashboard:profile'](),
            controller: 'ProfileController'
          
        
      ).state('root.dashboard.home', 
        url: '',
        views: 
          '@': 
            templateUrl: Urls['dashboard:dashboard_home'](),
            controller: 'DashboardController'
          
        
...

问题是当用户导航到非根页面（例如http://example.com/dashboard/profile/），并且用户刷新浏览器、重新加载浏览器的 URL 或直接将非根 URL 粘贴到浏览器。在这种情况下，用户不会在浏览器中加载保留相同 URL 的页面，而是被重定向到根页面 (http://example.com/dashboard/)。

由于路由是由 Angular 处理的，在服务器端我们没有为那些非根 URL 定义任何 url 路由；相反，我们有将 404 重定向到根页面的中间件：

class Redirect404(object):
    def process_response(self, request, response):
        if response.status_code != 404 or request.method != 'GET':
            return response
        return HttpResponsePermanentRedirect('/dashboard')

我们希望路由器能够保持原始 URL 并将用户带回原始页面（即“dashboard/profile”）。请注意，我们在 Angular 中设置了 html5Mode，如下所示：

$locationProvider.html5Mode = true;

我们的理解和/或设置存在一些错误，希望得到澄清。

【参考方案1】：

我们希望路由器能够维护原始 URL 并将用户带回原始页面。

那是误会。

这是事件的顺序：

用户在地址栏中输入http://example.com/dashboard/profile/。 浏览器向服务器发送GET 请求以获取该 URL。 您的服务器以 301 重定向响应进行响应。 浏览器看到该响应并向http://example.com/dashboard/ 发送一个新的GET 请求。 服务器响应您的 Angular 页面。 Angular 应用程序启动并查看window.href 以查看当前路由是什么。它会看到根路由并做出适当的响应。

换句话说，当您重定向时，您会丢失原始 URL。

解决方案很简单：无需重定向，只需返回您的页面以响应任何（有效）URL。这样请求的 URL 就被维护了，当 Angular 启动时，它就能找出正确的路径。 （这假设路由已在 Angular 中正确设置，但听起来您可以正常工作。）

实现也很简单。只需将您的 Django urls.py 从以下内容更改：

urlpatterns = [
    url(r'^dashboard/$', my_view),
]

到这样的事情：

urlpatterns = [
    url(r'^dashboard/.*$', my_view),
]

【讨论】：

太棒了。如果我只想允许有效 URL 而不是全部，而不对每个有效 URL 进行硬编码怎么办？

@Neil：您的意思是您希望 Django 只返回 Angular 应用程序公开的有效 URL 的页面，而不必在 urls.py 中输入它们？好问题。不过，我不知道有什么简单的方法可以做到这一点。快速的 Google 搜索会找到一些用于集成 Django url 和 Angular 路由的应用程序，但它们似乎面向 REST 后端，而不是这个。您可以修改自己的代码来处理 Angular 文件并以编程方式构造 urls.py，但这似乎有点过头了。

@Neil：考虑让您的 Angular 应用程序处理错误的 URL。它应该已经有一些处理错误的机制，包括 URL 错误。 （例如，/user/42/ 可能是语法上有效的 URL，但如果该用户不存在，您的 Angular 应用程序将必须有某种方法来处理错误。）因此，在一个地方而不是让服务器生成404s。

有道理。 ui-router 中有otherwise 规则，可以正常工作。

非常感谢。我喜欢这个解决方案。恭喜！