如何使用Vuejs和Laravel获取当前已验证的用户ID?

zbwhf8kr  于 2022-12-14  发布在  Vue.js
关注(0)|答案(6)|浏览(178)

我使用Vuejs作为我的前端,我只想从Laravel获取当前登录用户的id并显示它。我该怎么做呢?

ctrmrzij

ctrmrzij1#

另一种选择是以与crsf标记相同的方式执行此操作。

// header.blade.php
<meta name="user-id" content="{{ Auth::user()->id }}">

// main.js
Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content');

// component

mounted() {
    console.log(this.$userId)
}
vfh0ocws

vfh0ocws2#

通过多种方式获得auth用户id read more

Auth::user()->id;

Auth::id();

通过vue js

$http.get('api/user').then(response => {
   console.log(response.body);
})
dfuffjeb

dfuffjeb3#

If you are using authentication created by the 
composer require laravel/ui
php artisan ui vue --auth

You can add to

// app.blade.php or whatever you have maybe master.blade.php
 @if (Auth::check()) 
         <meta name="user_id" content="{{ Auth::user()->id }}" />
 @endif 

Then in the app.js add
Vue.prototype.$userId = document.querySelector("meta[name='user_id']").getAttribute('content');

Now if you want to get the logged in  user id and pass it to a hidden input field the first declare it as 

<script>

export default {
        props: ['app'],
        data()
        {
            return{
                user_id: this.$userId,
            }
        },

    }
</script>

  // Finally in your MyVueComponent.vue
<input type="hidden" name="user_id" v-model="user_id">

要进行测试,请尝试使用type=“text”而不是“hidden”,您会看到它显示了当前的id

tcbh2hod

tcbh2hod4#

我需要将数据传递给Header组件,所以我想我可以分享我的做法

<fronend-header :current-user="{{ json_encode(['isLoggedIn'=>auth()->check() ? true : false, 'user'=>auth()->check() ? auth()->user() : null]) }}" />

在视觉方面

<script>
    export default {
        name: "frontend-header",

        props: {
            currentUser: {
                type: Object,
                required: true
            }
        }
    };
</script>

我还没有在登录状态下尝试过,但是如果需要的话,我会做任何必要的修改。

ix0qys7i

ix0qys7i5#

嗨,我尝试了上述解决方案,但我得到了一个错误,因为还没有登录的用户。Uncaught TypeError: Cannot read property 'getAttribute' of null我添加了@else然后工作。@if (Auth::check()) <meta name="user_id" content="{{ Auth::user()->id }}" />@else <meta name="user_id" content="0" /> @endif希望能帮助别人

uqdfh47h

uqdfh47h6#

在我的Laravel 9中,app.js中没有Vue对象,因为它是通过createInertiaApp启动的。因此,我找到了一种方法,只需修改app.blade.php和我的Page.vue文件。
简单地说:
app.blade.php:

window.user_id: {!! auth()->check()?auth()->user()->id:'null' !!}

第.vue页(最顶部):

<script setup>
...
const user_id = window.user_id;
...

然后在我的Page.vue中,我可以在模板中的任何地方使用{{ user_id }}。

相关问题