使用laravel + vue圣殿来申请授权

基础概念

Laravel 是一个基于 PHP 的全栈 Web 应用框架，提供了丰富的功能来简化 Web 应用的开发过程。Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue 圣殿（Vue Sanctum）是 Laravel 框架中的一个附加组件，专门用于处理用户认证和授权。

类型

Web 应用: 适用于构建复杂的 Web 应用。
API 服务: 适用于构建 RESTful API。
单页应用（SPA）: 结合 Vue.js，适合构建单页应用。

应用场景

电子商务网站: 处理用户认证和授权，管理购物车和订单。
社交媒体平台: 用户注册、登录、权限管理。
内容管理系统（CMS）: 管理用户权限，控制内容发布。

遇到的问题及解决方法

问题：无法获取授权令牌

原因: 可能是由于请求头中缺少授权头，或者授权头格式不正确。

解决方法: 确保在请求头中正确设置 Authorization 头，格式如下：

Authorization: Bearer <your-access-token>

问题：CSRF 保护失败

原因: 可能是由于请求中没有包含 CSRF 令牌，或者 CSRF 令牌不匹配。

解决方法: 确保在表单中包含 CSRF 令牌，或者在 AJAX 请求中发送 CSRF 令牌。例如，在 Blade 模板中：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在 AJAX 请求中设置：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

问题：会话过期

原因: 会话可能因为长时间不活动而过期。

解决方法: 在客户端设置定时刷新会话的机制，或者在服务器端调整会话过期时间。

示例代码

Laravel 后端设置路由和控制器

// routes/api.php
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login', [AuthController::class, 'login']);

// app/Http/Controllers/AuthController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function login(Request $request)
    {
        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            $user = Auth::user();
            $token = $user->createToken('authToken')->plainTextToken;

            return response()->json([
                'status' => 'success',
                'access_token' => $token,
            ]);
        }

        return response()->json([
            'status' => 'error',
            'message' => 'Invalid credentials',
        ], 401);
    }
}

Vue 前端请求授权

// src/components/Login.vue
<template>
  <div>
    <input v-model="email" type="email" placeholder="Email">
    <input v-model="password" type="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('/api/login', {
          email: this.email,
          password: this.password
        });
        localStorage.setItem('access_token', response.data.access_token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>