Как проверить в компоненте Vue, аутентифицирован ли пользователь в Laravel?

Обычно из вашего контроллера вы передаете объект аутентифицированного пользователя в представление, которое затем будет сохранено в переменной javascript.

Контроллер:

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

Вы узнаете, аутентифицирован ли пользователь, если он возвращает объект, или null, где 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 под названием this.$store.getters.isLoggedIn, который вы можете использовать в своем приложении для проверки того, вошел ли пользователь в систему в данный момент.

например:

Помещение скрипта в блейд-файл вызовет предупреждение Vue. Позвольте мне ответить «Как проверить в компоненте Vue, если пользователь аутентифицирован в Laravel» и оставлю вас с вашей сложностью 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.info(this.auth_user)

  }
}
</script>

Возвращает null, если пользователь не вошел в систему

Используйте перехватчики 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
    }
});

Я работаю с laravel 7+ и ему не нужно отправлять Auth :: user () через контроллер Просто вызовите его из своего файла шаблона лезвия laravel, как показано ниже

ваше-имя-шаблона.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.info(this.authUser);
          },

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