passport 简易搭配-白红宇

passport 简易搭配

阅读量：796 次

发布时间：2023-02-26

本文共 4913 字，大约阅读时间需要 16 分钟。

前后端分离项目接口认证（Passport Laravel）

在前后端分离的项目中，前端如何通过接口进行认证是一个常见的问题。本文将详细介绍如何在Laravel框架中使用Passport包实现接口认证。

后端配置

安装Passport包

打开终端，执行以下命令安装Passport依赖包：

composer require laravel/passport

安装完成后，composer.json文件中会显示包的版本信息。

注册Passport服务提供者

打开config/app.php，在providers数组中添加Passport服务提供者：

Laravel\Passport\PassportServiceProvider::class,

执行数据库迁移

运行以下命令，数据库会生成接口认证所需的表结构：

php artisan migrate

创建密码授权客户端

使用以下命令创建一个密码授权客户端：

php artisan passport:client --password

创建完成后，会生成client_id和client_secret，前端登录时需要携带这两个参数。

获取API密钥

运行以下命令获取API密钥：

php artisan passport:keys

配置路由

打开AuthServiceProvider，在boot方法中添加以下代码：

use Laravel\Passport\Passport;public function boot(){    $this->registerPolicies();    Passport::routes();}

打开config/auth.php，修改guards数组中的api驱动为passport：

'guards' => [    'web' => [        'driver' => 'session',        'provider' => 'users',    ],    'api' => [        'driver' => 'passport',        'provider' => 'customers',    ],],

确保customers表是前端用户表，laravel默认使用user表时，需要自定义用户模型。

注册中间件

打开Kernel.php，在$routeMiddleware数组中添加以下中间件：

protected $routeMiddleware = [    'client.credentials' => \Laravel\Passport\Http\Middleware\CheckClientCredentials::class,];

在需要认证的接口路由文件routes/api.php中使用中间件：

Route::group(['prefix' => 'cart', 'middleware' => 'client.credentials'], function () {    // 接口路由});

用户模型配置

在Customer模型中添加以下用例：

use Illuminate\Foundation\Auth\User as Authenticatable;use Laravel\Passport\HasApiTokens;class Customer extends Authenticatable{    use HasApiTokens;    // 其他模型配置}

前端配置

路由配置

打开index.js，在路由数组中添加登录和注册路由：

const routes = [    {        path: '/customer/login',        name: 'login',        component: () => import('../views/customer/Login.vue')    },    {        path: '/customer/register',        name: 'register',        component: () => import('../views/customer/Register.vue')    }    // 其他路由];

登录组件开发

在Login.vue中实现用户登录功能：

拦截器配置

在http.js中添加拦截器，判断用户是否登录：

import axios from 'axios';import router from '@/router';axios.defaults.timeout = 5000;axios.defaults.baseURL = 'http://wechat.test/';axios.interceptors.request.use(config => {    config.headers.Authorization = `${localStorage.token_type} ${localStorage.access_token}`;    return config;}, error => {    return Promise.reject(error);});axios.interceptors.response.use(response => {    return response;}, error => {    if (error.response.status !== 200) {        alert('您还没有登录，请先登录');        router.push({ name: 'Login' });    }    return Promise.reject(error.response.data);});

注册功能

在routes/api.php中添加注册路由：

Route::namespace('Api')    ->group(function () {        Route::post('/register', 'HomeController@register');    });

在HomeController中实现注册接口：

public function register(Request $request){    $email = $request->email;    $password = $request->password;    $check_password = $request->check_password;    if (!$email || !$password) {        return response()->json(['success' => false, 'message' => '邮箱或密码必填！']);    }    $pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/";    if (!preg_match($pattern, $email)) {        return response()->json(['success' => false, 'message' => '邮箱格式不正确！']);    }    if ($check_password != $password) {        return response()->json(['success' => false, 'message' => '两次密码输入不一致！']);    }    $customer = Customer::where('email', $email)->first();    if ($customer) {        return response()->json(['success' => false, 'message' => '邮箱已被注册！']);    }    $password = \Hash::make($password);    $customer = Customer::create([        'email' => $email,        'password' => $password    ]);    return response()->json(['success' => true, 'message' => '注册成功！', 'customer' => $customer]);}

注册组件开发

在Register.vue中实现注册功能：