如何在vue組件上使用auth？ （Vue.JS 2）

Question

我的觀點刀片這樣的：

@if (Auth::user()) 
    <favorite :id="{{ $store->id }}"></favorite> 
@else 
    <a href="{{url('/login?red='.Request::path())}}" class="btn btn-block btn-success"> 
     <span class="fa fa-heart"></span>Favorite 
    </a> 
@endif 

Auth::user()工作

但是，當我嘗試在VUE成分是這樣的：

<template> 
    ... 
    <div v-if="Auth::user()"> 
     <favorite :id="item.id"></favorite> 
    </div> 
    <a v-else href="javascript:" class="btn btn-block btn-success"> 
     <span class="fa fa-heart"></span>Favorite 
    </a> 
    ... 
</template> 

<script> 
    export default { 
     props: ... 
     computed:{ 
      ... 
     }, 
     ... 
    } 
</script> 

它不工作

存在這樣的錯誤：

無效的表達式：V-IF = 「驗證用戶::（）」

我怎樣才能使用身份驗證的VUE組件？

Answer 1

1. 您不能在Vue中以這種方式使用Laravel變量（PHP）。
2. 您應該決定是否要構建標準應用程序或SPA。
3. 如果您想構建標準的多頁面應用程序，您可以將VueJS組件放置在PHP標籤之間，就像您在第一個示例中一樣。
4. 如果你仍然想建立標準的多頁的應用程序，但可以使用您的Auth::user()值，存在點一個選擇5
5. 的Auth::user()傳遞價值的VueJS組件作爲道具。

https://vuejs.org/v2/guide/components.html#Props

使用道具這樣的：

props: ['auth'], 
(...) 
<template> 
    ... 
    <div v-if="auth"> 
     <favorite :id="item.id"></favorite> 
    </div> 
    <a v-if="!auth" class="btn btn-block btn-success"> // avoid using v-else as per VueJS docs 
     <span class="fa fa-heart"></span>Favorite 
    </a> 
    ... 
</template> 

，並使用您的組件中，如代碼： <favorite :id="{{ $store->id }}" auth="Auth::user()"></favorite>

不知道如果你沒有投驗證::用戶（）字符串/整數，但我很確定你會弄明白與PHP。

Answer 2

可以使用auth()->user()代替Auth::user()