我可以在同一个项目中使用Django URL和Vue路由吗？

Question

我启动了一个Django应用程序，并使用Django Allauth创建了整个身份验证层，它已经有了相当多的功能，如电子邮件确认、密码重置和双因素身份验证。现在我意识到，由于我的应用程序将具有高度的交互性和许多实时功能，我需要一个Vue SPA与Django一起使用，因此我正在考虑在同一服务器和域上创建Vue SPA，并将Django作为Rest API

这是我的问题：因为我已经使用Django模板和Django URL完成了整个身份验证部分，如果我将前端的其余部分与后端分开，我是否必须重写所有内容？是否可以将Vue应用程序和Django后端应用程序分离在同一个域中，其中身份验证由Django模板处理，其余所有应用程序都是具有Vue路由的Vue应用程序，所有其他交互由Django rest Framework端点处理

所以可能是这样的：

urlpatterns = [
    path('accounts/signup/', SignUpView.as_view(), name='signup'), #Django template
    path('accounts/login/', LoginView.as_view(), name='login'), #Django template
    ...
]

这些是Django处理的唯一URL，其中页面由Django视图呈现。用户登录后，将重定向到VueJS应用程序

Answer 1

我个人的看法是，仅仅为了注册、登录……而保留一堆服务器端页面是不值得的。。。从长远来看，同时管理服务器端页面和前端页面是一个令人头痛的问题。但如果你喜欢这种方式，下面是我的建议

对于身份验证，请使用Django auth。不管它是服务器端HTML页面还是API端点。Django auth简单且安全。不要使用自己的身份验证，不要将令牌存储在localstorage中

将这3个部分完全分开：

• 前端URL（即存储在Vue中的路由）
• 后端页面URL（即Django切断的HTML页面）
• 后端API端点URL（即用户从未看到的URL，只有Vue在后台使用）

它们可以位于单独的域上，但也可以仅通过路径前缀。正如你自己在评论中建议的那样

现在，当用户访问BE中的某个页面时，它将使用服务器端呈现，并且每次用户单击都是浏览器刷新。在您点击FE URL之前，您的前端代理应该将用户重定向到FE，否则您将直接从Django提供JS文件。之后，每个用户单击都在Vue内部处理，无需刷新。若用户点击的是BE的URL前缀，那个么FE需要执行类似于document.location = "/server-side/some-page的操作

---

顺便说一句，几天前我回答了another question与此类似，也许你会发现答案或评论很有用

---

1. So in order to log in from the SPA i need to send a csrf token, and in order to get the token i can create a Django view that returns a CSRF token to the user so that it can be used to login. Wouldn't it provide attackers a way to attack my server (stackoverflow.com/questions/43567052/…)

我的建议是关闭CSRF保护，改为使会话cookie samesite=Lax（我认为在较新版本的Django中这是默认设置）。所有主流浏览器都支持这一点，它可以防止CSRF

否则，您可以从另一个API或类似于here的cookie读取令牌

2. So on production i will use Nginx to have the Vue app and the Django backend app on the same server and domain, but on development how can i do that? If i run the two apps on different terminals, won't django consider the Vue app to be in a different server?

它无法理解它是什么服务器。您唯一应该关心的是cookie的域。它应该设置在您的be域上。在本地上运行时，FE和BE都在域“localhost”上运行，因此应该没有问题