Django和Vue.js之间的JWT身份验证

我希望在包含标准Django和模板的网站上创建一个公共区域。当用户登录到“成员”区域时，他们将登录到SPA（使用）和。一旦用户登录到会员区，我将使用JWT处理SPA和后端之间的身份验证

这是用户的旅程：

用户浏览站点的公共区域（由普通Django和模板提供）

用户决定注册/登录到成员区域

Django Rest框架为用户生成JWT，并返回令牌以及SPA的

index.html

用户继续与JWT一起使用SPA

---

是否有可能实现上述目标？如何实现？更具体地说，问题在于用户没有登录SPA并请求JWT。他们登录到普通的Django，并与SPA一起返回JWT。JWT将从此点开始使用。

这是我在laravel中使用的，但原理应该是相同的

我已将vue cli生成的代码放入子文件夹

frontend

这是文件

vue.config.js

的精简内容，您需要手动将其添加到

vue cli

项目根目录中

const path = require('path')

/*
  vue-cli is initialized in project subfolder `frontend`
  and I run `npm run build` in that sub folder
 */
module.exports = {
  outputDir: path.resolve(__dirname, '../public/'),
  /*
    https://cli.vuejs.org/config/#outputdir
    !!! WARNING !!! target directory content will be removed before building
    where js, css and the rest will be placed
   */
  assetsDir: 'assets/',
  /*
    Where `public/index.html` should be written
    - this is example for the laravel, but you can change as needed
    - .blade.php is laravel template that's served trough laravel.
      So you could inject JWT into `index.html`
    - Check https://cli.vuejs.org/guide/html-and-static-assets.html
       for the syntax before adding values
   */
  indexPath: path.resolve(__dirname, '../resources/views/index.blade.php'),
  devServer: {
    host: '0.0.0.0',
    port: 8021,
    proxy: {
      /*
        Proxy calls from
        localhost:8021/api (frontend)
        localhost:8020/api (backend)
       */
      '/api': {
        target: 'http://localhost:8020',
        changeOrigin: true,
      }
    }
  }

};

---

您正在使用vue cli吗？Webpack，browserify，…？我正在使用

vue cli

我已经发布了答案，这是我用于laravel的东西。它还不完整，但也许可以帮你解决。我得走了，稍后我会回答你的问题。身份验证是在常规django页面上还是在SPA上完成的？初始登录或注册是通过django完成的。然后，用户将收到SPA以及JWT令牌。从那时起，使用JWT。换句话说，站点或标准Django的公共区域包括登录页面。登录后，将使用SPA。