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

Question

我们将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粘贴到浏览器中时。http://example.com/dashboard/在这种情况下，用户将被重定向到根页面（），而不是在浏览器中加载保留相同URL的页面。

由于路由是由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;

在我们的理解和/或设置中存在一些错误，请您澄清一下。

Answer 1

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

那是误会。

这是事件的顺序：

1. 用户http://example.com/dashboard/profile/在位置栏中键入。
2. 浏览器向GET服务器发送该URL 的请求。
3. 您的服务器以301重定向响应进行响应。
4. 浏览器会看到该响应，并向发送新GET请求http://example.com/dashboard/。
5. 服务器以您的“ Angular”页面响应。
6. Angular应用程序启动并查看window.href以查看当前路线。它看到根路由并做出适当响应。

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

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

实现也很简单。只需通过以下方式更改Django urls.py：

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

像这样：

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