Question

正如标题所述，我有点困惑如何根据用户是否登录并使用Laravel的Auth外观进行身份验证的if / else语句处理Vue组件中的方法。我正在根据用户是否登录发出各种允许/禁止的Axios请求。

我已经设置了VUEX，并正在考虑可以以某种方式使用本地存储为 isLoggedin 提供状态，例如可与Laravel一起使用的状态。但是我不知道这是正确的方法，还是安全的，大概是Laravel已经存储了它的身份验证。那么我可以直接在Vue中访问它吗？

一些我认为不是最好的不干净的解决方案- https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and-vuejs

我找不到关于此的任何示例：（

Answer 1

通常，从您的控制器中，将经过身份验证的用户对象传递到视图中，然后将其存储在javascript变量中

控制器：

public function index()
{
    return view('index', [
        'auth_user' => Auth::user()
    ]);
}

如果用户返回一个对象，则将知道该用户是否已通过身份验证；如果为null，则表示没有用户通过身份验证。

在刀片中，将auth_user分配给一个javascript变量：

<script>
    window.auth_user = {!! json_encode($auth_user); !!};
</script>

您的vuex存储对象至少应如下所示：

{
    state: {
        user: null
    },
    mutations: {
        setAuthUser(state, user) {
            state.user = user;
        }
    },
    getters: {
        isLoggedIn(state) {
            return state.user !== null;
        }
    }
}

然后在您的Vue根组件中，获取auth_user并将其保存到商店中：

<script>
    export default {

        mounted() {
            this.$store.commit('setAuthUser', window.auth_user);
        }

    }
</script>

您现在基本上有了一个名为getter的{{1}}，您可以在应用程序中使用它来检查用户当前是否登录。

例如：

Answer 2

在刀片文件中放置脚本会引发Vue警告。让我回答“如果在Laravel中对用户进行了身份验证，如何检入Vue组件”，而让您陷入Vuex的复杂性。而且这种方法更简单。

因此，在您的控制器中：

public function index()
{
    return view('index')->with('auth_user',  auth()->user());
}

在您的刀片服务器上（main.blade.php）：

<div class="container">
    <example-component :auth_user='@json($auth_user)'></example-component>
</div>

在您的vue组件中，获取道具（ExampleComponent.vue）：

<script>
export default {

  props: ['auth_user'],

  created () {
    console.log(this.auth_user)

  }
}
</script>

如果用户未登录，则返回null

Answer 3

使用axios拦截器。您拦截访问被拒绝的http响应代码，然后采取相应措施。

window.axios.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    if (419 === error.response.status) {
         location.reload();
    } else {
        //Something else you want to do or do nothing
    }
});

Answer 4

我正在使用laravel 7+ 而且不需要通过控制器发送Auth :: user（）只需从您的laravel刀片模板文件中调用即可，如下所示

your-template-name.blade.php

@if (Auth::check())
     <script>window.authUser={!! json_encode(Auth::user()); !!};</script>
@else
     <script>window.authUser=null;</script>
@endif

在YourComponent.vue内，存储authUser像这样：

<script>
    export default {
         data() {
              return {
                   authUser: window.authUser
              }
          },

          created() {
                console.log(this.authUser);
          },

          methods: {
             yourMethodName() {
                  console.log(this.authUser);
          }
      }
 <script>

如果在Laravel中认证了用户，如何检入Vue组件？

4 个答案: