【发布时间】：2021-06-09 23:31:16
【问题描述】：
我将 Vue 添加到我的 Django 项目中，但由于我不想将前端与后端分离，我决定直接从 Django 加载 webpack。我的设置似乎适用于 django webpack loader，但我对我如何构建项目有一些疑问。
这是我的文件夹：
my_site
- django settings
my_app
- views, urls, models, templates
vue_frontend
- webpack and vue stuff
我的疑问是：路由应该由 Django 处理还是应该由 SPA 中的 Vue 处理？
这是我现在拥有的：
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 组件。我的疑问：这是一种不好的做法吗？有什么我应该避免这样做的原因吗？
【问题讨论】：
-
可能是 XY 问题。你为什么不想解耦你的前端和后端？将这些与 Web API 分开作为抽象层是一种行业标准
-
有各种原因，比如我不想使用从 Django 渲染它的好处以及 Django 的所有安全优势，而且我比我更熟练 Django我在使用 Vue，所以我觉得从单独的前端处理身份验证不安全
-
我明白了。不过，仅从前端就很难破坏安全性。默认情况下，所有 Vue、React 和 Angular 都会保护您免受 XSS 的攻击，您需要非常努力地让自己陷入困境。并且无论 FE 是否紧密耦合，身份验证都由后端处理。
-
是的，主要问题是，将应用程序托管在两个不同的域上可能会使我在安全性方面失去很多 django 优势。我对在本地存储上存储 jwt 令牌有一些疑问，我认为这不是最安全的解决方案；有基于会话的身份验证，但我不知道它如何在两个不同的域上工作。另一件事是缺乏这方面的例子，最后最大的问题是我已经在这个环境中设置了应用程序，所以转向解耦将是一个非常重要的支点
-
是的，单独的域很糟糕，但是您可以使用带有 nginx proxy_pass 的域或通过 CDN 的方式（CloudFront、Cloudflare、Fastly 都可以做到）。对于本地开发，请使用 dev-proxy。有趣的是，不久前我进行了完全相同的讨论，也许我会在周末挤出一篇关于如何在一个域上设置 Django + SPA 的博客文章，这真的不是那么难。无论如何，如果您的设置适合您，请继续保持。回答您的原始问题路由应该发生在 SPA 中，否则您的 SPA 将不是 SPA。不过，您仍然需要从 Django 端返回 index.html
标签： javascript django vue.js webpack