处理vue+django webpack应用程序中的页面



我在Django项目中添加了Vue,但由于不想将前端与后端解耦,我决定直接从Django加载webpack。我的设置似乎可以使用django-webpackloader,但我对如何构建项目有一些疑问。

这是我的文件夹:

my_site
- django settings
my_app
- views, urls, models, templates
vue_frontend 
- webpack and vue stuff

我的疑问是:路由应该由Django处理,还是应该由Vue在SPA中处理?

这是我现在拥有的:

django_template2.html

{% extends 'header.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}
<body>
<div id="app">
<firstVueComponent />
</div>
</body>

{% render_bundle 'chunk-vendors' %}
{% render_bundle 'main' %}
{% endblock %}

django_template2.html

{% extends 'header.html' %}
{% load render_bundle from webpack_loader %}
{% block content %}
<body>
<div id="app">
<secondVueComponent />
</div>
</body>

{% render_bundle 'chunk-vendors' %}
{% render_bundle 'main' %}
{% endblock %}

Django在这里处理url:

from django.urls import path, include
from . import views
urlpatterns = [
path('first_page/', views.first_page, name='first'),
path('second_page/', views.second_page, name='second'),
]

因此,在这里,我不使用Vue来处理路由,而是在需要的Django模板中加载同一应用程序的各个Vue组件。我的疑问是:这是一种糟糕的做法吗?有什么理由让我避免这样做吗?

我的疑问是:路由应该由Django处理,还是应该由Vue在SPA中处理?

如果您要进行SPA,您的FE需要知道路线,例如,如果用户单击链接/项目,您的FE需要知道如何更新URL。否则会出现页面刷新或错误的URL。

所以这里我不是用Vue来处理路由,而是在我需要的Django模板中加载同一应用程序的各个Vue组件。我的疑问是:这是一种糟糕的做法吗?有什么理由让我避免这样做吗?

我认为你需要决定是否要建立SPA。我的经验法则是,如果你的页面上有很多互动,或者你有一个专门的FE团队,SPA会更好。在BE/FE之间完全分离肯定是行业事实上的标准,但在BE上呈现大多数内容和拥有轻量级FE也不是犯罪,堆栈溢出本身就是使用这种方法的。

如果您使用SPA,那么在BE中放置FE URL也没有多大意义(除非您正在进行类似服务器端渲染的操作(。BE将提供一组API URL(对最终用户不可见(,FE将使用它们并提供用户将看到的一组FE URL。

是的,主要问题是将应用程序托管在两个不同的域上可能会使我在安全性方面失去很多django的好处。我对在本地存储中存储jwt令牌有一些疑问,我认为这不是最安全的解决方案;有基于会话的auth,但我不知道它如何在两个不同的域上工作。另一件事是缺乏这方面的例子,最后最大的问题是我已经在这个环境中设置了应用程序,所以移动到解耦将是一个非常重要的

您的担忧有多种答案。

1-没有必要有分离的域。你可以用/api/作为所有BE URL的前缀,然后在生产中你可以使用像NGINX或Traefik或你的负载均衡器这样的反向代理。。。将两者分开。从长远来看,拥有单独的域更容易维护,但您需要不时处理cookie/CORS问题。

2-如果你有分离的域,你可以用这个设置在主域和子域上设置cookie

3-没有必要在本地存储中使用JWT令牌。IMO,它不如拥有httponly cookie。Django会话身份验证默认情况下只启用httponly。通过这种方式,您安装的随机npm库或页面上的第三方脚本无法访问和窃取令牌。

4-另一方面,Django CSRF保护有点过时了,现在我们在浏览器上有了相同的cookie。请在此处查看浏览器支持。Django的新版本默认为Lax,它可以在支持的浏览器上保护您免受CSRF的攻击。因此,你可以关闭这种保护措施,减少头痛。

我个人认为您可以坚持使用基于Django会话的auth,而无需向FE添加任何内容。FE将只调用/api/auth/login,并且将自动设置适当的cookie。

为了更健壮,您可以添加一个类似/api/auth/me的API,将当前登录的用户数据返回给FE。FE会在用户第一次访问您的网站时调用该命令,以了解用户是否登录。

相关内容

最新更新