如何在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()