如何在Laravel+Vue电商项目中自动设置Laravel Passport授权token

一、实现登录自动设置token的方法 #

1. 逻辑调整说明 #

你当前的代码执行顺序完全颠倒：先发起需要鉴权的用户信息请求，再获取token，必然无法正常拿到数据。登录逻辑应当放在独立的登录页组件执行，完整流程如下：

• 用户在登录页输入账号密码，提交后调用登录接口
• 接口返回成功后，将auth_token存储到localStorage/sessionStorage本地缓存中
• 通过路由跳转到仪表盘页面

2. 登录页核心代码示例 #

<!-- 独立登录页组件 -->
<template>
  <div>
    <input v-model="loginForm.email" type="email" placeholder="请输入邮箱">
    <input v-model="loginForm.password" type="password" placeholder="请输入密码">
    <button @click="handleLogin">登录</button>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  data() {
    return {
      loginForm: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      const res = await Axios.post('http://localhost:8000/api/login', this.loginForm)
      if (res.data.success) {
        // 存储token到本地缓存
        localStorage.setItem('auth_token', res.data.data.auth_token)
        // 跳转至仪表盘
        this.$router.push('/dashboard')
      } else {
        alert(res.data.message)
      }
    }
  }
}
</script>

3. 封装Axios实例（推荐） #

你可以封装统一的Axios实例，通过请求拦截器自动为所有接口添加鉴权头，无需每个接口手动配置：

// api.js 内容示例
import Axios from 'axios'
const $api = Axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {
    'Accept': 'application/json'
  }
})
// 请求拦截器：自动携带token
$api.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})
export default $api

4. 调整后的仪表盘代码 #

<template>
  <div class="content-center">
    <h1>Dashboard my account</h1>
    <p>
        {{userData.name}}
    </p>
  </div>
</template>
<script>
// 导入封装好的api实例
import $api from '@/api.js'
export default {
  data() {
    return {
      userData: ""
    }
  },
  async beforeMount() {
    // 直接调用接口，无需手动加token
    const res = await $api.get('/user-details')
    this.userData = res.data
  }
}
</script>

二、api.js导入路径说明 #

• 相对路径写法和你的文件目录结构强相关：如果dashboard.vue放在src/pages/dashboard/目录，api.js放在src/根目录，那么相对路径写法为import $api from '../../api.js'，你写的./../api.js仅适用于api.js在当前文件上一级目录的场景，需要根据实际层级调整。
• 更推荐使用别名路径：Vue CLI/Vite创建的项目默认支持@别名指向src目录，直接写import $api from '@/api.js'即可，无需考虑当前文件层级，不会出现路径错误。

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