如何在 vue 组件上使用身份验证？ (Vue.JS 2)

Posted 2023-02-22

【中文标题】如何在 vue 组件上使用身份验证？ (Vue.JS 2)

【英文标题】：How can I use auth on vue component ? (Vue.JS 2)

【发布时间】：2017-08-14 14:04:45

【问题描述】：

我的视图刀片是这样的：

@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="Auth::user()"

如何在 vue 组件上使用身份验证？

【问题讨论】：

您是在构建 SPA 还是标准的多页应用程序？没有办法将纯 Laravel 的东西直接传入.vue 单文件组件

@Belmin Bedak，就像我不使用它一样

很高兴它有帮助！

@M U，太好了。非常感谢

【参考方案1】：

您不能以这种方式在 Vue 中使用 Laravel 变量 (php)。 您应该决定是要构建标准应用还是 SPA。 如果您想构建标准的多页应用程序，您可以将您的 VueJS 组件放置在 PHP 标记之间，就像您在第一个示例中所做的那样。 如果您仍想构建标准的多页应用程序，但能够使用您的 Auth::user() 值，则第 5 点有适合您的选项。 将Auth::user() 的值作为prop 传递给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>

不确定您是否不必将 Auth::user() 强制转换为 string/int，但我很确定您会用 php 解决。

【参考方案2】：

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

【参考方案3】：

根据接受的答案，我无法让身份验证用户对象工作（无错误地呈现）:(

但我可以像这样访问和传递诸如 id 之类的直接属性

<example :auth="Auth::user()->id"></example >

请注意，它必须是“v-bind”，因为它是动态属性而不是显式字符串。

我还把它作为另一种产生用户 ID 的替代方案。

auth=" Auth::check() "

我很想知道如何将对象传递到 vue 组件中？