Ошибка запрещенного доступа: следуя руководству Directus SDK

У меня возникли проблемы с изучением Directus SDK. Примерно следующее: https://docs.directus.io/blog/building-a-personal-travel-journal-with-vue-js-and-directus.html#creating- коллекция-журналов и-пользователей

Когда я пытаюсь получить доступ к данным, я получаю:

GET http://127.0.0.1:8055/items/calibers 403 (Forbidden)

Я могу получить к этому доступ напрямую из Chrome, но не из SDK. Подробности ошибки в консоли:

{
    {
      "message": "You don't have permission to access collection \"calibers\" or it does not exist. Queried in root.",
      "extensions": {
        "reason": "You don't have permission to access collection \"calibers\" or it does not exist. Queried in root.",
        "code": "FORBIDDEN"
      }
    }
  ],
  "response": {
    ...
    status: 403
    statusText: "Forbidden"
    type: "cors"
    url: "http://127.0.0.1:8055/items/calibers"
  }
}

Я думал, что это может быть проблема CORS, но я уже видел это раньше во время обучения, и поэтому у меня есть CORS_ORIGIN: 'true' в моем файле докеров.

Я могу нормально создать страницу входа и успешно войти в систему, следуя инструкциям (это единственная страница, с которой я могу работать), но я не могу даже получить данные, используя простую тестовую страницу:

<script setup>
import { ref, onMounted } from 'vue'
import { createDirectus, rest, readItems } from '@directus/sdk'

// Client with REST support
const client = createDirectus('http://127.0.0.1:8055/').with(rest())
const retval = ref([])

onMounted(async () => {
  try {
    const response = await client.request(readItems('calibers'))
    console.info('Full response:', response)
    retval.value = response
    console.info('success value read:', retval.value)
  } catch (error) {
    console.error('Error fetching:', error)
  }
})
</script>

<template>
  <div v-for = "val in retval" :key = "val.id">
    <div>{{ val }}</div>
  </div>
</template>

После успешного входа в систему с помощью страницы входа из этого руководства я могу напрямую получить доступ ко всем данным в своем браузере Chrome. Я также могу получить к нему доступ с помощью почтальона, используя те же учетные данные пользователя, поэтому я должен предположить, что мой пользователь настроен правильно (я использую пользователя-администратора по умолчанию).

Моя установка имеет:

  "dependencies": {
    "@directus/sdk": "^17.0.0",
    "pinia": "^2.1.7",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^20.14.5",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/eslint-config-prettier": "^9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "jsdom": "^24.1.0",
    "npm-run-all2": "^6.2.0",
    "postcss": "^8.4.41",
    "prettier": "^3.2.5",
    "tailwindcss": "^3.4.10",
    "typescript": "~5.4.0",
    "vite": "^5.3.1",
    "vitest": "^1.6.0",
    "vue-tsc": "^2.0.21"
  }

И мой файл компоновки докера имеет:

  environment:
    DB_CLIENT: 'sqlite3'
    DB_FILENAME: '/directus/database/data.db'
    KEY: 'xxxxx'
    SECRET: 'xxxxx'
    ADMIN_EMAIL: 'xxxxx'
    ADMIN_PASSWORD: 'xxxxx'
    CACHE_ENABLED: 'false'
    CACHE_STORE: 'redis'
    REDIS: 'redis://cache:6379'
    CORS_ENABLED: 'true'
    CORS_ORIGIN: 'true'
    CORS_METHODS: 'GET,POST,PATCH,DELETE'
    CORS_CREDENTIALS: 'true'
    REFRESH_TOKEN_COOKIE_DOMAIN: 'localhost'
    EXTENSIONS_AUTO_RELOAD: 'true'
    WEBSOCKETS_ENABLED: 'true'
    IMPORT_IP_DENY_LIST: ''

Я новичок и потерялся - любое направление приветствуется. Я даже не знаю, где устранять неполадки (журналы ошибок и т. д.). Спасибо!


Обновлено: вот что отображается в журналах Docker после запуска, войдите в систему и запустите этот файл test.vue:

2024-08-23 21:31:03 [04:31:02.426] INFO: Initializing bootstrap...
2024-08-23 21:31:03 [04:31:02.430] INFO: Database already initialized, skipping install
2024-08-23 21:31:03 [04:31:02.430] INFO: Running migrations...
2024-08-23 21:31:03 [04:31:02.442] INFO: Done
2024-08-23 21:31:03 2024-08-24T04:31:03: PM2 log: Launching in no daemon mode
2024-08-23 21:31:03 2024-08-24T04:31:03: PM2 log: App [directus:0] starting in -cluster mode-
2024-08-23 21:31:06 2024-08-24T04:31:06: PM2 log: App [directus:0] online
2024-08-23 21:31:08 [04:31:07.574] WARN: "PUBLIC_URL" should be a full URL
2024-08-23 21:31:08 [04:31:07.578] WARN: Spatialite isn't installed. Geometry type support will be limited.
2024-08-23 21:31:08 [04:31:07.585] INFO: Watching extensions for changes...
2024-08-23 21:31:08 [04:31:07.638] INFO: GraphQL Subscriptions started at ws://undefined/graphql
2024-08-23 21:31:08 [04:31:07.639] INFO: WebSocket Server started at ws://undefined/websocket
2024-08-23 21:31:08 [04:31:07.656] INFO: Server started at http://0.0.0.0:8055
2024-08-23 21:31:33 [04:31:33] POST /auth/login 200 529ms
2024-08-23 21:31:43 [04:31:43] OPTIONS /items/calibers 204 2ms
2024-08-23 21:31:43 [04:31:43] GET /items/calibers 403 30ms

Можете ли вы показать мне логи docker-compose logs <container name or id> или докера docker logs <container id or name>, когда вы пытаетесь получить доступ к калибрам из SDK?

nabin sademba 24.08.2024 05:52

@nabinsademba Я обновил вопрос с результатами журнала

Adam 24.08.2024 06:34

ОК, при создании роли клиента, после того, как вы дали разрешение CRUD на эту роль и доступ приложения к этой роли, появляется инструкция: Click on public role and enable create, read, update, and delete access to the journal .... вы следовали этому??

nabin sademba 24.08.2024 07:24

хммм... да, вот и все. какой смысл создавать специального пользователя и входить в систему, если у публики будет доступ к той же функциональности? Я что-то упускаю? Спасибо, перечитал раз десять... не увидел этого абзаца. Если вы хотите добавить это в ответ, я отмечу это, чтобы дать вам баллы.

Adam 24.08.2024 07:41

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

nabin sademba 24.08.2024 08:08

Еще раз спасибо. Сейчас буду изучать аутентификацию SDK :)

Adam 24.08.2024 08:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

ок, отлично, я тоже многому научился и сделаю документацию я сделаю все возможное

Ответ принят как подходящий

проблема уже решена в разделе комментариев

Проблема с недоступностью коллекции возникла из-за того, что не был назначен доступ Public role с CRUD к коллекции, как описано в этом обучающем блоге

Другие вопросы по теме