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
