AngularJS + Django:URL 刷新或直接访问未正确加载 [英] AngularJS + Django: URL refresh or direct access not loading correctly

问题描述

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

We have AngularJS embedded into our Django application, with URL routing handled by AngularJS ui-router. All is working fine navigating between partials using ui-sref and clicking around within the application.

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 的页面.

The problem is when the user has navigated to a non-root page (say for example http://example.com/dashboard/profile/), and the user refreshes the browser, re-loads the browser's URL or simply pastes in the non-root URL directly into the browser. Instead of loading the page retaining the same URL in the browser, the user is getting redirected to the root page (http://example.com/dashboard/) in this case.

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

Since routing is handled by Angular, on the server side we don't have any url routes defined for those non-root URLs; instead we have middleware that redirects 404s to the root page:

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，如下所示:

We expect that the router would be able to maintain the original URL and bring the user back to the original page (i.e. 'dashboard/profile'). Note we have set HTML5Mode in Angular as follows:

$locationProvider.html5Mode = true;

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

There is some mistake in our understanding and/or setup, and would appreciate clarification.

推荐答案

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

这是误会.

这是事件的顺序:

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

1. The user types http://example.com/dashboard/profile/ into the location bar.
2. The browser sends a GET request to the server for that URL.
3. Your server responds with a 301 redirect response.
4. The browser sees that response and sends a new GET request to http://example.com/dashboard/.
5. The server responds with your Angular page.
6. The Angular application starts up and looks at window.href to see what the current route is. It sees the root route and responds appropriately.

换句话说，当您重定向时，您会丢失原始网址.

In other words, when you redirect you lose the original URL.

解决方案很简单:无需重定向，只需返回您的页面以响应任何(有效)URL.这样，请求的 URL 就会得到维护，并且当 Angular 启动时，它将能够找出正确的路由.(这假设路由已在 Angular 中正确设置，但听起来您可以正常工作.)

The solution is simple: instead of redirecting, simply return your page in response to any (valid) URL. That way the requested URL is maintained, and when Angular starts up it will be able to figure out the right route. (This assumes that routing is set up properly in Angular, but it sounds like you have that working.)

实现也很简单.只需将您的 Django urls.py 改成这样:

The implementation is also simple. Just change your Django urls.py from something like this:

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

像这样:

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

这篇关于AngularJS + Django:URL 刷新或直接访问未正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！