К Фреймворку Nuxt js я начал присматриваться еще давно, и вот когда применил его в одном из своих последних проектов , то столкнулся с несколькими задачами:

Во первых, сделать авторизацию на основе JWT (Json Web Token), забегая вперед скажу, что с этой задачей я быстро справился. при помощи прекрасного модуля nuxt-auth. Ниже приведу рабочий конфиг который нужно прописать в файле nuxt.config.js.

// Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'http://127.0.0.1:8000/api/',
  },

  auth: {
    scopeKey: 'user_type',
    strategies: {
      local: {
        scheme: 'refresh',
        localStorage: {
          prefix: 'auth.'
        },
        token: {
          prefix: 'access_token.',
          property: 'access_token',
          maxAge: 86400,
          type: 'Bearer'
        },
        refreshToken: {
          prefix: 'refresh_token.',
          property: 'refresh_token',
          data: 'refresh_token',
          maxAge: 60 * 60 * 24 * 15
        },
        user: {
          property: 'user',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/login', method: 'post'},
          refresh: { url: '/token/refresh/', method: 'post' },
          user: { url: '/user', method: 'get' },
          logout: { url: '/logout', method: 'post'}
        },
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }

Во вторых я далее столкнулся с задачей организации разграничения прав доступа к nuxt приложению, на основании ролей которые я планировал получать из backenda в моем случае это Django RestFramework. Ниже я выложу код модели и сериализера Джанги, для полноты картины.

#models.py
class CustomUser(AbstractBaseUser, PermissionsMixin):
    USER_TYPE_CHOICES = (
      (1, 'customer'),
      (2, 'manufacturer'),
      (3, 'seller'),
    )
    name = models.CharField(max_length=50, null=True, blank=True)
    phone = models.CharField(max_length=12, verbose_name='Телефон')
    email = models.EmailField('Адрес электронной почты', unique=True)
    is_staff = models.BooleanField(default=False)
    is_active = models.BooleanField(default=True)
    date_joined = models.DateTimeField(default=timezone.now)
    user_type = models.PositiveSmallIntegerField(choices=USER_TYPE_CHOICES)

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = []
    objects = CustomUserManager()
                      
    def get_scope(self):
      arr = []
      arr.append(self.get_user_type_display()) 
      return arr 
         
    def __str__(self):
        return self.email

#serializers.py
class UserSerializer(serializers.ModelSerializer):
    user_type = serializers.ListField(source='get_scope')
    # scope = serializers.CharField(source='get_user_type_display')
    
    def create(self, validated_data):
        return get_user_model().objects.create_user(**validated_data)
    
    class Meta:
        model = get_user_model()
        fields = ('email', 'password', 'phone', 'name', 'user_type')
        extra_kwargs = {
            'password': {'write_only': True, 'min_length': 8},
        }

Нюансы на которые стоит заострить внимание

• Поле ScopeKey нужно указывать в секции auth в конфиге nuxt.
• Поле ScopeKey по умолчанию имеет значение ScopeKey: ‘scope’ и если вам backend отдает поле с таким названием можете смело пропускать это пункт.
• Поле scope: должно содержать массив строк. Например ‘scope’: {‘admin’, ‘editor’}

Заключение

Для того, чтобы проверить работу данной настройки достаточно создать middleware следующего содержимого.

export default function ({ $auth, redirect }) {
  if ($auth.hasScope('manufacturer')) {
    console.log('MANUFACTURER scope')
  }
}

Если пользователь имеет права ‘manufacturer’ как в моем случае, тогда в консоли выведется MANUFACTURER scope.