Laravel API - Vue SPA | Как безопасно получить изображение и отобразить его в теге img? - PullRequest
Новая
       5

Laravel API - Vue SPA | Как безопасно получить изображение и отобразить его в теге img?

1 голос
/ 08 апреля 2020

У меня есть Laravel 7 API-интерфейс и Vue 2 SPA. Оба являются двумя разными репозиториями / серверами. И у меня есть некоторые изображения / файлы, которые я хочу показать только аутентифицированным пользователям из моего API.

Laravel Код API:

Итак, у меня есть маршрут /api/v1/users/{user}/profile_picture: 


    /**
     *  Returns profile picture if user has access to it or it is user's own picture
     * 
     * @param  Request
     * @param  User
     * @return HTTP response
     */
    public function getProfilePicture(Request $request, User $user) {
        if($user->is($request->user()) || $request->user()->can("View All Images")) {
            return response()->file(storage_path('app/avatars/'.$user->avatar));
        }else {
            return response()->json([
                'message' => $request->user()->name . ' does not have the permission to access this picture'
            ], 403);
        }
    }

Я проверил этот маршрут в почтальоне, и он отлично работает (я получаю предварительный просмотр изображения в почтальоне). Однако я не могу отобразить это изображение в теге <img> в моем Vue SPA.

Vue Код: 

<template>
 ...
 <img key="onlineImg" :src="'data:image/jpeg;base64, ' + profile_pic" alt="user-img" width="40" height="40" />
...
</template>

<script>

import jwt from '@/http/requests/auth/jwt/index.js';


export default {
  data () {
    return {
      profile_pic: ""
    }
  },

  mounted() {
      jwt.profile_picture_get().then((response) => {
        this.profile_pic = Buffer.from(response.data, 'binary').toString('base64');
      });
  },
}

Независимо от того, как я пытаюсь назначить ответ на :src= не работает. По окончании запроса я получаю уменьшенное изображение.

Как я могу это исправить?

...