Vue.js（axios）のAPIアクセス時のトークンを変数にしたい

Question

#やっていること
LaravelをAPIサーバーとして使用、vue(axios)でアクセスして画面表示させるアプリケーションを作成中です。
Laravelでの認証は標準装備のtokenを利用したもので、下記のようにハードコードすればvueも表示できます。

let axios = require('axios').create({
        baseURL: ApiUrl,
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Bearer '+'uGI09ICALLdclOBvsbdthstXKodnfavpHMmRCi4KhALJShbN1s8KmTdi',
        },
        responseType: 'json'
    });

---

#実現させたい状態
'Bearer '+'uGI09ICALLdclOBvsbdthstXKodnfavpHMmRCi4KhALJShbN0s8KmTdi'
↓
'Bearer '+tokenData

とトークンを変数にしたい。

#試したこと
tokenDataは親コンポーネントから送られてきているのでpropsにあります。（vueのdevツールやtemplateに{{ tokenData }}で文字列は表示されるので変数には代入されているようです。）
vueのドキュメントにはpropsからdataやcomputedに入れてから使用するようにとあったので、dataやcomputedを介しての使用も試しました。

'Bearer '+tokenData, //NG
'Bearer '.concat(tokenData), //NG
'Bearer '.concat(this.tokenData), //NG

#教えて欲しいこと
そもそも実現させたいことが間違っているのか、JS構文のミスなのか。
いずれはvuexも使用をするつもりですが、今は動きの確認中なのでvuexは使用せずpropsでの動作を試みています。
ヒントだけでも教えていただけると助かります。

#追記
実際に動かしているコンポーネントの全体像になります。
以下のハードコード時はvueDevツール内のpropsとcomputedには文字列が入っております。

<template>
    <div>
        <div class="head">
            <h2>User Registration</h2>
        </div>
        <ul class="side-bar-list">
            <SideBar
                    v-for="user in users"
                    :key="user.id"
                    :userData="user"
                    @userEdit="userEdit"
            ></SideBar>
        </ul>
    </div>
</template>

<script>
    import SideBar from './registration_components/SideBar';

    const ApiUrl = 'http://localhost/*******/*******/public/api/items';
//====================================================================
//ここの部分に問題があると考えています。

    var headers = {
        'Accept': 'application/json',
        // 'Authorization': 'Bearer '+'uGI09ICALLdclOBe8UtTvykugiydnoJkcc6pHMmRCi4KhALJShbN2s8KmTdi',//このようにハードコードするとエラーがありません。
        'Authorization': 'Bearer '.concat(this.tokenNo),
    };

//====================================================================
    let axios = require('axios').create({
        baseURL: ApiUrl,
        headers: headers,
        responseType: 'json'
    });

export default {
    name: 'UserControl',
    props:{
        tokenData: {
            type: String,
            // required: true
        }
    },
    components: {
        SideBar
    },
    computed:{
        tokenNo() {
        return this.tokenData
        }
    },
    data () {
        return {
            users: null,
            editUser: {
                first_name: '',
                family_name: '',
                age: '',
                email: '',
                password: '',
                edit: false
            }
        };
    },
    mounted () {
        axios.get(ApiUrl)
            .then(response => (this.users = response.data));
    },
    methods: {
        // edit method
        clearEdit () {
            this.editUser = {
                first_name: '',
                family_name: '',
                age:'',
                email: '',
                password: '',
                edit: false
            };
        },
        // SideBar method
        userEdit (selectUserID) { // ユーザー編集のONとOFF
            let selectEditUser = this.users.findIndex(({ id }) => id === selectUserID);// IDから編集を選択されたユーザー取得
            this.releaseEdit(selectEditUser);
            this.users[selectEditUser].edit = !this.users[selectEditUser].edit;
            this.setCurrentUser();
            this.$forceUpdate();
        },
        releaseEdit (userIndex) { // 選択したユーザー以外が編集中だった場合に解除
            let editTrueIndex = this.users.findIndex(({ edit }) => edit === true);// 編集中のユーザーインデックスを取得
            if (editTrueIndex > -1) { // indexで取得のためindexが有効かチェック
                if (this.users[editTrueIndex].edit !== this.users[userIndex].edit) { // 編集中のユーザーと選択したユーザーが違う場合に削除発火
                    this.users[editTrueIndex].edit = false;
                }
            }
        },
        setCurrentUser () { // 編集ONになった際に右の編集画面に反映させるメソッド
            let editTrueIndex = this.users.findIndex(({ edit }) => edit === true);
            if (editTrueIndex > -1) {
                this.editUser = this.users[editTrueIndex];
            } else {
                this.refresh();//編集を更新しない場合はデータベースを再取得
                this.clearEdit();//右側の記入欄をクリア
            }
        },
        //Api method
        async update (data) {//ユーザー情報の更新
            await axios.put(ApiUrl+'/'+data.id, data)
                .then(
                    alert('user edit ok')
                )
                .catch(function (err) {
                    alert(err)
                });
            this.refresh()
        },
        async addUser () {//Userの追加
            await axios.post(ApiUrl, this.editUser)
                .then(
                    alert('user add ok')
                )
                .catch(function (err) {
                    alert(err);
                });
            this.refresh()//thenの中に書いて不安定になってたけど、ここにして安定した。
        },
        async softDelete (id) {//Userの論理削除、Deleted_atにTimeStamp入力
            await axios.delete(ApiUrl+'/'+id)
                .then(
                    alert('user softDeleted ok')
                )
                .catch(function (err) {
                    alert(err)
                });
            this.refresh()
        },
        refresh (){//Api処理後の再表示
            axios.get(ApiUrl)
                .then(response => (
                    this.users = response.data
                ))
                .catch(err => (
                    alert(err)
                ));
        },
        // Registration method
        add () {
            if (this.users.find(editId => editId.id === this.editUser.id)) { //users内にeditUserのidが存在する＝＞更新の場合
                if (confirm('ユーザー情報を更新しますか？')) {
                    //↑ var result = confirm('ユーザー情報を更新しますか？')をそのまま代入している。
                    var editTrueIndex = this.users.findIndex(({edit}) => edit === true);// 編集中のインデックス取得
                    this.users[editTrueIndex].edit = !this.users[editTrueIndex].edit; // 編集ボタンを解除
                    this.update(this.users[editTrueIndex]);
                    this.clearEdit();
                }
            } else { // users内にeditUserのidが存在しない＝＞追加の場合
                if (confirm('ユーザーを追加しますか？')) {
                    this.addUser();
                    this.clearEdit();
                 }
            }
        },
        del () {
            if (confirm('ユーザーを削除しますか？')) {//user削除
                var editTrueIndex = this.users.findIndex(({edit}) => edit === true);
                this.softDelete(this.users[editTrueIndex].id);
                this.clearEdit();
                this.refresh();
            }
        },
    }
};
</script>

<style scoped lang="scss">

</style>

methods内でもaxiosは使用していますが、動的な部分ですので初期表示のmountedがメインのエラー個所と考えています。
#エラーコード

'Authorization': 'Bearer '.concat(this.tokenNo)

上記、使用時のエラーコードは以下になります。

app.js:2947 Uncaught TypeError: Cannot read property 'tokenNo' of undefined

恥ずかしい話、今回の質問後にエラーを確認しましたがundefinedでした。
しかし、なぜundefinedになってしまっているのかわかりません。

Answer 1

親コンポーネントがトークンを取得する前にAPI呼んでるのでは・・・？
'Bearer '.concat(this.tokenData)でダメなのから推測すると、this.tokenDataが空の状態でAPI呼んでると思います。
ChromeのデベロッパーツールのNetworkタブをXHRでフィルタリングして見てリクエストがどうなってるか見てみると良いですよ。

追記

export default {...} の外側でthis.tokenNoを参照してるので、未定義の変数を参照してエラーになってます。
下記のような感じにすると良いと思います。

<script>
import SideBar from './registration_components/SideBar';
import axios from 'axios';

const ApiUrl = 'http://localhost/*******/*******/public/api/items';

export default {
  // 中略

  computed: {
    client() {
      return axios.create({
        baseURL: ApiUrl,
        headers: {
          'Accept': 'application/json',
          'Authorization': `Bearer ${this.tokenData}`,
        },
        responseType: 'json'
      });
    }
  },

  methods: {
    async update (data) {//ユーザー情報の更新
      await this.client.put(`/${data.id}`, data)
        .then(
          alert('user edit ok')
        )
        .catch(function (err) {
          alert(err)
        });
      this.refresh()
    },
  },

  // 中略
}
</script>

Comments

[EjiOsa]

Networkタブ→XHRでリクエストを確認しました。
当然ですがハードコード時は'Authorization'の項目もあり、エラーも出ていませんでした。
.concatや＋で文字列結合すると、エラーでリクエスト自体も無くなります。vueコンポーネントの表示もなくなっています。
また、vueのdevツールやtemplateに{{ tokenData }}で文字列は表示されるので変数に文字列は入っていると考えていたので、今回のエラーの原因は文字列結合の構文エラーかと考えていました。
文字列結合時にthis.tokenDataが空になってしまうことがあるのでしょうか？
また、空の文字列を渡していたら'Authorization'の項目は残ってStatusCodeも400番台になると考えていましたが、その認識から間違っているでしょうか。

よろしくお願いいたします。

[yhg]

EjiOsaさんの認識で正しいです。

私は文字列結合時に空になるのではなく、文字列結合の直前の this.tokenData が空の状態なのではないかと考えていました。
ですが、エラーでリクエスト自体が発生しないのなら、空の状態でも結合自体は成功するはずなので別の問題っぽいですね。

コンポーネント全体のコードやエラー内容とか貼っていただければ、具体的な原因が分かるかもしれません。

[EjiOsa]

返信ありがとうございます。
本文にコンポーネントの全体やエラーコードを追加しました。
流れとして、Laravelのapi_tokenはblade.phpでコンポーネント呼び出し時にAuth::user()->api_tokenで取得、一つコンポーネントを挟んでから今回のコンポーネントになります。バケツリレーになっているので今後はvuexも必要かと考えていますが、このようなエラーが解決できなくてはvuexも理解できないと考えてvuexは使用せずに調査しています。

Answer 2

headersを変数に入れてaxios呼び出し時にセットしてみてはどうでしょう？

let headers = {
  'Accept': 'application/json',
  'Authorization': 'Bearer '+ tokenData,
}
axios.get('/users', headers)
axios.post('users', body, headers)

のような形でheadersをaxiosに設定できると思います。

Comments

[EjiOsa]

回答のようにaxios呼び出し時にheadersを引数に入れる方法をとりましたが、エラーで全vueコンポーネントが表示されませんでした。
headersを入れずにURLのみの場合は動くので、headersを呼び出し時に入れる方法に何か不手際があると考えてます。

再度、誤字脱字からチェックをしたいと思います。何かヒントがあればよろしくお願いいたいます。

[y-ogura]

axios呼び出し時のコードと、エラーの内容も合わせて教えてもらえますか？

ちなみに私はいつもvue-axiosを使用して~/pluginsにaxiosの初期設定ファイルを置いています。

```
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const instance = axios.create({
// ここに初期設定項目
})

Vue.use(VueAxios, instance)
```

[EjiOsa]

返信ありがとうございます。
本文にコンポーネント全体とエラーコードを追加しました。
現在の開発環境はvue独立使用ではなく、Laravel内のvueとaxiosの使用になっているので初期設定はbootstrap.jsに記載されています。
もしかしたら、このbootstrap.jsの影響があるのでしょうか？
その方向性からもチェックしてみたいと思います。
現時点ではbootstrap.jsの内容は何も触っていません。
また、会話が噛み合ってなかったら申し訳ありません。

[y-ogura]

おそらくですが、export defaultの外でthis.tokenNoを使用していることが、原因だと思われます。
propsでtokenDataを取得しているのであれば例えば
```
data () {
return {
// 他のdataは省略してます
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer '+ this.tokenData
}
}
}
```
としてしまって
```
let axios = require('axios').create({
baseURL: ApiUrl,
responseType: 'json'
});
```
でaxiosのインスタンスを作成
APIを叩くときに
await axios.post(ApiUrl, this.editUser, this.headers)
と書いてみてはどうでしょう？

[EjiOsa]

data()内で宣言することでheadersは使用可能となりました。
ですが、axiosの第2引数には代入できず。
axios.defaults.headers['Authorization'] = 'Bearer '+this.tokenData;
といった一文を挟んでエラーなく実行しています。
そのため結果的には全て解決には至っておりませんが、export defaultの内外での変数の使用が良くなかったのはわかったので、今回の質問では解決にさせていただきました。
export defaultについてと、axiosについて学習を続けて理解を深めたいと思います。