Передача пользовательских данных BLOB-объекта Active Storage в Chrome Dev Tools

Question

Я создал клиентское приложение Rails API / React с функциональной аутентификацией на основе токенов с помощью jwt & bcrypt.Я могу зарегистрировать пользователей и получить логин, включая получение токена для текущего пользователя.

Используя axios в инструментах разработчика Chrome, я могу видеть пользователей, которых создал, потому что добавил консольВойдите в функции getAllUsers & loginUsers.

Я начал следовать этому учебнику, чтобы добавить изображение профиля пользователя в свое приложение:

https://medium.com/@jennyjean8675309/connect-your-react-application-to-a-railsaapi-using-active-storage-part-1-e59dcacc481b

После этогоучебник, я смог:

• настроить активное хранилище
• создать начальный файл с изображением аватара пользователя
• просмотреть начальные файлы active_storage_blob в Postico
• просмотреть начальные файлы active_storage_attachment в Postico.

Однако, поскольку мой FrontEnd был построен до того, как следовать этому уроку, у меня есть некоторые различия, поэтому я не могу понять, какполучить аватар с рельсов и отобразить его в консоли, как показано на этом рисунке из учебника:

[консольный журнал] https://miro.medium.com/max/1320/1*_eDCZuXKsBN5JgSk47bUKw.png "подсказка"

В частности, это bБлокировка кода из учебника не работает с моим приложением (возможно, так как мой метод входа имеет функцию проверки сверху для проверки пользователя):

  def show
    user = user.find_by(user_params)
    avatar = rails_blob_path(user.avatar)

    if user.password == params[:password]
    render json: {user: user, avatar: avatar}
    else
      render json: {message: 'not authenticated'}
end

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

Я занимался этим примерно один день или около того, но я не смог найти никаких ресурсов, которые могли бы указать мне правильное направление

Я пытался перемещаться по currentAvatar: null внутри loginForm.

В инструментах React Dev реквизиты currentAvatar всегда возвращают null.

RAILS:

Модель> user.rb

class User < ApplicationRecord
  has_secure_password
  has_one_attached :avatar
end

Контроллеры> user_controller.rb

class UsersController < ApplicationController
  before_action :set_work, only: [:show, :update, :destroy]
  before_action :authorize_request, except: :create
  before_action :authorize_request, only: [:verify]
  # GET /users
  def index
    @users = User.all
    render json: @users
  end

  # GET /users/1
  def show
    user = user.find_by(user_params)
    avatar = rails_blob_path(user.avatar)

    if user.password == params[:password]
    render json: {user: user, avatar: avatar}
    else
      render json: {message: 'not authenticated'}
end

....

    # Only allow a trusted parameter "white list" through.
    def user_params
      params.require(:user).permit(:email, :password, :avatar)
    end
  end

REACTJS

api-helper.js

import axios from 'axios'

const baseURL = 'http://localhost:3000'
const api = axios.create({
  baseURL: baseURL
})


// GET ALL USERS
export const readAllUsers = async () => {
  const resp = await api.get('/users')
  console.log(resp);
  return resp.data
}

// CREATE USER
export const registerUser = async (registerData) => {
  const resp = await api.post('/users/', { user: registerData })
  return resp.data.data
}


// LOGIN USER

export const loginUser = async (loginData) => {
  const resp = await api.post('/auth/login', loginData)
  localStorage.setItem('authToken', resp.data.token);
  api.defaults.headers.common.authorization = `Bearer ${resp.data.token}`
  return resp.data.data
}


// VERIFY USER
export const verifyUser = async () => {
  const token = localStorage.getItem('authToken');
  if (token) {
    api.defaults.headers.common.authorization = `Bearer ${token}`
    const resp = await api.get('/users/verify');
    return resp.data
  }
  return false;
}

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      loginFormData: {
        email: '',
        password: '',

      },
      currentUser: [],
      currentAvatar: null,
      registerForm: {
        email: "",
        password: ""
      },
    }
  }


....


  async componentDidMount() {
    this.getUsers();
    const user = await verifyUser();
    if (user) {
      this.setState({
        currentUser: user,
      })
      console.log(user);
    }
  }


  getUsers = async () => {
    const allUsers = await readAllUsers();
    this.setState({
      allUsers,
    })
  }


....

  // Login
  handleLogin = async () => {
    const userData = await loginUser(this.state.loginFormData);
    this.setState({
      currentUser: userData
    })
    this.props.history.push("/dashboard")
  }

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState(prevState => ({
      loginFormData: {
        ...prevState.loginFormData,
        [name]: value
      }
    }));
  }

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