JWT-аутентификация между Django и Vue.js

Question

Я хочу создать публичную область на сайте, содержащую стандартные Django и шаблоны. Когда пользователь входит в зону участников, он входит в SPA (используя Vue.js ) и Django Rest Framework . Я буду использовать JWT для обработки аутентификации между SPA и серверной частью после того, как пользователь войдет в зону участников.

Это путешествие пользователя:

1. Пользователь просматривает открытые области сайта (обслуживаемые обычными Django и шаблонами).
2. Пользователь решает зарегистрироваться / войти в личный кабинет.
3. Django Rest Framework генерирует JWT для пользователя и возвращает токен вместе с index.html SPA
4. Пользователь продолжает использовать SPA с JWT

Возможно ли вышеизложенное и как это будет сделано? Более конкретно, проблема заключается в том, что пользователь не входит в SPA и не запрашивает JWT. Они входят в обычную 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,
      }
    }
  }

};