如何在Vue.js中使用Sentinel判断用户是否登录？

嗨，这个问题我之前折腾过，直接在Vue文件里用Blade的@if(Sentinel::check())肯定不行的，因为Vue文件是前端编译运行的，而Blade语法是后端Laravel解析的，两者的执行环境完全分开，Vue文件根本不会经过Blade的解析流程，那些@语法最后只会变成纯文本输出，自然起不到判断作用。

下面给你几个实用的解决方案，按需选就行：

方案1：后端注入全局变量（适合简单场景） #

在Laravel的主模板文件（比如resources/views/app.blade.php）里，用Blade把登录状态输出成一个全局的JavaScript变量，这样Vue组件就能直接读取：

<!-- 在app.blade.php的<head>或者<body>末尾添加 -->
<script>
    // 用Blade判断后输出布尔值
    window.isUserLoggedIn = {{ Sentinel::check() ? 'true' : 'false' }};
</script>

然后在你的Vue组件里直接使用这个全局变量：

<template>
  <div>
    <div v-if="isLoggedIn">欢迎回来！</div>
    <div v-else>请先登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: window.isUserLoggedIn
    }
  }
}
</script>

方案2：API接口动态验证（适合SPA或实时判断） #

如果是单页应用，或者需要在不刷新页面的情况下实时判断登录状态，可以写一个后端接口返回登录状态，然后Vue通过AJAX请求获取：

第一步：后端写接口（routes/web.php或routes/api.php） #

// 示例API路由
Route::get('/api/auth/check-login', function () {
    return response()->json([
        'logged_in' => Sentinel::check()
    ]);
});

第二步：Vue组件里请求接口 #

<template>
  <div>
    <div v-if="isLoggedIn">欢迎回来！</div>
    <div v-else>请先登录</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      isLoggedIn: false
    }
  },
  mounted() {
    // 组件挂载时请求接口
    axios.get('/api/auth/check-login')
      .then(response => {
        this.isLoggedIn = response.data.logged_in
      })
      .catch(err => {
        console.error('请求登录状态失败', err)
      })
  }
}
</script>

方案3：Vuex状态管理（适合复杂应用） #

如果你的项目用了Vuex来管理全局状态，那可以在用户登录/登出时更新状态，并同步到localStorage（防止页面刷新丢失），之后组件直接从Vuex读取状态：

第一步：在Vuex的state里添加状态 #

// store/index.js
export default new Vuex.Store({
  state: {
    isLoggedIn: localStorage.getItem('isLoggedIn') === 'true'
  },
  mutations: {
    SET_LOGIN_STATUS(state, status) {
      state.isLoggedIn = status
      localStorage.setItem('isLoggedIn', status)
    }
  },
  actions: {
    // 可以在这里调用API验证登录状态
    checkLoginStatus({ commit }) {
      axios.get('/api/auth/check-login')
        .then(res => {
          commit('SET_LOGIN_STATUS', res.data.logged_in)
        })
    }
  }
})

第二步：在Vue组件里使用 #

<template>
  <div>
    <div v-if="$store.state.isLoggedIn">欢迎回来！</div>
    <div v-else>请先登录</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 可选：组件挂载时验证并更新状态
    this.$store.dispatch('checkLoginStatus')
  }
}
</script>

内容的提问来源于stack exchange，提问作者ampedo