axiosとvue.jsでインスタの一覧表示をするときにトークンを隠したい

Question

インスタグラムの写真リストをfacebookのGraph APIから取得、表示させています。

axsiosで取得して、vue.jsで表示しているのですが、

トークンを隠す方法などありましたらお教えいただけないでしょうか。

コードは以下の通りです。

HTML

<div id="insta_app" class="insta_app_box01">
      <div class="insta_app_box01_inner">
        <a v-for="item in items" v-bind:href="item.permalink" target="_blank">
          <div v-bind:style="{ backgroundImage: 'url(' + item.media_url + ')' }"></div>
          <div id="if_movie_thumbnail" v-bind:style="{ backgroundImage: 'url(' + item.thumbnail_url + ')' }"></div>
          <p>{{ item.caption }}</p>
        </a>

      </div><!-- .insta_app_box01_inner -->
</div><!-- .insta_app_box01 -->

JS

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<script>
var app = new Vue({
  el: '#insta_app',
  data: {
    items: null
  },
  mounted: function() {
    axios.get('https://graph.facebook.com/v3.3/インスタのID?fields=name,username,profile_picture_url,media_count,followers_count,follows_count,media.limit(9){caption,like_count,media_url,permalink,timestamp,thumbnail_url}&access_token=ここにトークンが入ります')
    .then(function(response){

      this.items = response.data.media.data
      console.log(response.data.media.data)
    }.bind(this))
    .catch(function(error){
    })
  }

})
</script>

Answer 1

クライアント側で情報を隠蔽するのは不可能かと思われます。
InstaAPIを叩くには、最終的に平文で通信する必要があるためです。

代替案として、サーバーをクライアントとInstaAPIの間に立てる方法が考えられます。
サーバーはクライアントからの要求を受け取り、サーバー内でトークンを付与してInstaAPIを叩く、という構成です。

これであれば要件は達成できるかと思います。

回答になっていれば幸いです。