Passing data from Laravel to Vue

Làm thế nào để gửi dữ liệu từ Laravel đến Vue đây, nếu như ta có ý định xây dựng một hệ thống CMS với sự kết hợp của Laravel + Vue. Thì ta sẽ phải dùng mọi cách có thể để gửi dữ liệu qua lại,vậy làm sao đây ta! thôi làm thử xem sao ::)

Example: 
 - Login laravel success
 - Send data Auth()->id and Auth()->name to Component Vue

Đầu tiên ta chạy câu lệnh: php artisan make:auth mà laravel đã cung cấp cho ta sẵn các phần login và register
Bạn vào thư mục resources/views/layouts/app.blade.php có thể chỉnh sửa lại như sau:

<div id="app">
  
    @if (Auth::id()>0)
        <main-component :user-name='@json(auth()->user()->name)' 
                  :user-id='@json(auth()->user()->id)'></main-component>
    @else
        <p>Bạn vui lòng quy lại đăng nhập hệ thông! <a href="{{route('login')}}">Login</a></p>
    @endif
     
</div>

Trong đoạn code bên trên ta kiểm tra xem login thành công chưa, nếu thành công sẽ thực thi <main-component></main-component>. Nếu login không thành công sẽ hiện thông báo đăng nhập lại
Tiếp theo vào thư mục resources/js tạo component MainComponent.vue và import component này vào file app.js

//MainComponent.vue
<template>
    <div>
        <ul class="treeview-menu">
            <li><router-link to="/admin/default"><i class="fa fa-circle-o"></i>Main</router-link></li>
            <li><router-link :to="{ name: 'post', params: { userId } }"><i class="fa fa-circle-o"></i>Posts</router-link></li>
            <li><router-link :to="{name:'lists',params:{userId}}"><i class="fa fa-circle-o"></i>Lists post</router-link></li>  
            <li><router-link :to="{name:'category',params:{userId}}"><i class="fa fa-circle-o"></i>Categories</router-link></li>
        </ul>
    </div>
</template>
<script>
    export default{
        props:['userId','userName'],
        data(){
            return{
                  URL_LINK:'http://localhost:8000', 
            }
        },
        mounted(){
          
        },
        methods:{
            logout(){
                axios.post(this.URL_LINK+"/admin/logout").then((response)=>{
                    if (response.status === 204) {
                         document.location.href="/admin/login";
                    }
                    else {
                        document.location.href="/admin/default";
                    }
                }).catch(error => {
                     document.location.href="/admin/login";
                });
             
            }
        }
    }
</script>

Để nhận được dữ liệu từ laravel gửi đến vue qua component, ta cần dùng Props:['userId','userName'], bên cạnh đó nếu ta muốn logout thì cần dùng axios.post("http://localhost:8000/logout") nhé, còn ở đây vì mình đã chỉnh sửa lại đường dẫn login và logout nên nhìn hơi khác xíu.

//route in Vue
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
          path:"/admin/default",
          name:'home',
          component:HomeComponent  
        },
        {   
            path:"/admin/post",
            component: Dashboard,
            children:[
                {
                    path:"",
                    name:'post',
                    component: PostComponent,
                    props:true
                },
                {
                    path:"lists",
                    name:"lists",
                    component: ListsPostComponent,
                    props:true
                },
                {
                    path:"edit",
                    component:EditPost,
                    props: (route) => ({query: route.query.id })
                }
            ]
        },
        {
            path:"/admin/category",
            component:Dashboard,
            children:[
                {
                    path:"",
                    name:'category',
                    component:AddCategory,
                    props:true
                }
            ]
        }
    ]
});
const app = new Vue({
    el: '#app',
    router,
    components: { MainComponent },
});

Dưới đây là phần phía xử lý logout bên Laravel và route định tuyến.

//LoginController.php in laravel
public function logout(Request $request)
{
   // $request->user();
    $this->guard()->logout();
    return response()->json([], 204);
}

//web.php in laravel 
Route::group(['prefix' => 'admin'], function () {
    Auth::routes();
});

Bạn có thể xem thêm bài viết về sự kết hợp của Laravel + Vue: 

+ Create Template Vuejs and Laravel 5.4

+ Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS

+ Create Cart Laravel 5.4 +VueJS