当前位置：首页 > VUE

laravel vue实现登录

2026-02-10 22:30:20VUE

Laravel 和 Vue 实现登录功能

后端配置（Laravel）

安装 Laravel Sanctum 用于 API 认证

composer require laravel/sanctum
php artisan sanctum:install
php artisan migrate

在 config/auth.php 中配置 API 守卫

'guards' => [
    'api' => [
        'driver' => 'sanctum',
        'provider' => 'users',
    ],
],

创建登录路由（在 routes/api.php）

use App\Http\Controllers\AuthController;

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

创建 AuthController

php artisan make:controller AuthController

实现登录逻辑（在 app/Http/Controllers/AuthController.php）

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\User;

public function login(Request $request)
{
    $credentials = $request->validate([
        'email' => 'required|email',
        'password' => 'required',
    ]);

    if (!Auth::attempt($credentials)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }

    $user = User::where('email', $request->email)->first();
    $token = $user->createToken('auth_token')->plainTextToken;

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

前端配置（Vue）

安装 axios 用于 HTTP 请求

laravel vue实现登录

npm install axios

创建登录组件（resources/js/components/Login.vue）

<template>
  <div>
    <form @submit.prevent="handleLogin">
      <input v-model="form.email" type="email" placeholder="Email" required>
      <input v-model="form.password" type="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        email: '',
        password: ''
      }
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form);
        localStorage.setItem('auth_token', response.data.access_token);
        axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.access_token}`;
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error.response.data.message);
      }
    }
  }
}
</script>

配置 axios 全局设置（resources/js/app.js）

import axios from 'axios';
window.axios = axios;

const token = localStorage.getItem('auth_token');
if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
}

路由保护

创建 Vue 路由守卫（resources/js/router/index.js）

laravel vue实现登录

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('auth_token');
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

为需要认证的路由添加 meta 字段

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

跨域配置（可选）

在 Laravel 中配置 CORS（config/cors.php）

'paths' => ['api/*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:8080'],
'allowed_headers' => ['*'],

注销功能

在 AuthController 添加注销方法

public function logout(Request $request)
{
    $request->user()->currentAccessToken()->delete();
    return response()->json(['message' => 'Logged out']);
}

在 Vue 组件中添加注销方法

async logout() {
  try {
    await axios.post('/api/logout');
    localStorage.removeItem('auth_token');
    delete axios.defaults.headers.common['Authorization'];
    this.$router.push('/login');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}