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),
]