はじめに
サーバーサイドの処理はLaravelでクライアントサイドはSPAで認証、新規会員登録、記事の投稿を一括で作成しましたので、自分用のメモ含め紹介いたします。
前提
Laravel5.5
Vagrant環境
認証はJTWAuth使用
SPAはVue、Vue Router
前回のパート１の続き
https://qiita.com/ProgramingDai/items/403ee4fbc0971827f160
今回作るもの
認証ユーザーで記事の投稿する機能実装
手順レシピ
1.記事リストの編集
resorces/asset/js/components/pages/List.vue
<template lang="html">
<div class="container">
<div class="list-group">
<!-- 追加③ -->
<router-link
v-for="( item, key, index ) in items"
:key="key"
:to="{ name: 'detail', params: { id: item.id } }"
class="list-group-item"
v-if="user.id == item.user_id">
{{item.title}}
<button class="btn" @click.stop.prevent="onDelete(item.id, key)">削除</button>
</router-link>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
items: null,
user: {} // 追加②
}
},
mounted: function() {
// 中略
},
methods: {
// 中略
},
// 追加①
created() {
axios.get('/api/me').then(res => {
this.user = res.data;
});
}
}
</script>
追加①
axios.get('/api/me')でAuthControllerのmeメソッドからデータを取得
取得したデータをuser変数に格納
追加②
dataの中のuserプロパティに配列で格納
そうするとtemplate内で{{ user.id }}や{{ user.name }}などで表示可能
追加③
認証ユーザーのみ記事を表示させる
v-if="user.id == item.user_id"
user.id = 認証UserのID（主キー）
item.user_id = その記事が誰が投稿したかを示す値（外部キー）
2.詳細ページの編集
resorces/asset/js/components/pages/Detail.vue
<form v-else>
<!-- 追加 -->
<input type="hidden" name="user_id" id="TopicUserId" class="form-control" v-model="item.user_id">
<!-- 中略 -->
<script>
// 追加
onUpdate: function() {
axios.put('/api/topics/' + this.item.id, {
// 追加
user_id: this.item.user_id,
title: this.item.title,
content: this.item.content
})
// 追加
</script>
3.フォームページの編集
resorces/asset/js/components/pages/Form.vue
<template>
<!-- 中略 -->
</template>
<script>
export default {
data: function() {
// 中略
},
methods: {
create : function() {
axios.post('/api/topics', {
user_id: this.user.id, // 追加
title: this.title,
content: this.content,
})
.then((res) => {
this.title = '';
this.content = '';
this.saved = true;
console.log('created');
});
}
},
// 追加
created() {
axios.get('/api/me').then(res => {
this.user = res.data;
});
}
}
</script>
これで、認証ユーザーで記事の投稿、認証ユーザーのみの描画が可能です。
あとは新規会員登録のみです。
次回はこちらを実装する方法を実装したいと思います。
補足
js側を変更した場合は
npm run devしないと更新されませんので、ご注意ください。