如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID？

Posted 2023-02-22

【中文标题】如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID？

【英文标题】：How to get current authenticated user id using Vuejs and Laravel?

【发布时间】：2019-03-13 04:32:44

【问题描述】：

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

【参考方案1】：

其他选项是使用与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)

【讨论】：

嗯，我觉得这个答案非常适合我。谢谢，但最好这样做@if(Auth::check()) <meta name="user-id" content=" Auth::user()->id "> @endif

如果用户没有一直登录，你也可以使用可选的<meta name="user-id" content=" optional(Auth::user())->id ">

如何将this.$userId 填充到文本字段中？

【参考方案2】：

通过多种方式获取auth用户idread more

Auth::user()->id;

Auth::id();

vue js

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

【讨论】：

如果你想将它传递给一个 VueJS 元素，你可以使用一个 prop。例如<custom :user-id=Auth::id()></custom>

你假设他有 vue 资源

【参考方案3】：

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

【参考方案4】：

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

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

在 vuejs 方面

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

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

尚未在登录状态下尝试过，但如果需要，我会做任何必要的更改。

【参考方案5】：

您好，我尝试了上述解决方案，但由于还没有登录用户而出现错误。 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希望对某人有所帮助