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

Question

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

这是用户旅程：

1. 用户浏览站点的公共区域（由普通Django和模板提供）。
2. 用户决定注册/登录会员区。
3. Django的REST框架为用户生成一个JWT，并与一起返回令牌index.html的SPA
4. 用户继续通过JWT使用SPA

以上可能并且将如何进行？ 更具体地说，问题是，用户没有到SPA登录并请求智威汤逊。 他们正在登录常规Django，并获得JWT和SPA。 这JWT将被从该点开始使用。

Answer 1

这是我在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,
      }
    }
  }

};