详细说明Laravel5.6 Passport实现了Api接口认证

很多企业对项目使用前端分离，后端提供接口地址，前端使用接口地址获取数据和渲染页面。那么，如何使用接口对前端用户登录进行身份验证呢？网上的各种教程都很难看，完全无法理解，所以我根据自己的理解写了这篇文章，希望对大家有所帮助。

后端(Laravel5.6框架)

1.使用composer安装Passport，打开终端并执行以下命令：

安装composer require laravel/Passport #后，您将在composer.json文件中看到文件版本信息。2.接下来，在配置文件config/app.php的providers数组中注册passport服务提供程序

laravel \ passport serviceprovider :3360类，3。执行数据库迁移

php artisan migrate #数据库将生成接口验证所需的五个表。4.创建密码授权客户端

PHP Artisan Passport : Client-Password #创建client_id和client_secret，在前端登录验证时必须随身携带。5.拿到钥匙

Php artisan passport:keys6，配置路由

打开服务提供程序AuthServiceProvider，并将以下代码：添加到引导方法中

使用Laravel \ Passport \ Passport公共函数boot(){ $ this-registerPolicies()；passport : routes()；//接口认证路由}然后将配置文件config/auth.php中授权看门人守卫的api的驱动程序选项更改为passport

我的客户表是前端用户表，但默认情况下laravel是用户表，因此这里需要以下配置：

guards '=[' web '=[' driver '=' session '，' provider'='users '，]，' api'=[ 'driver'='passport '，' provider'='customers '，]，' provider '=[' users '=[' driver '=' enhanced '，' model '=App \ Models \ Shop \ customer 33603: class，]，]，7。注册中间件，并在app/Http/Kernel.php文件的$ routeMiddleware数组中添加以下中间件

受保护的$ RoutemIdeWare=[' client . credentials '=\ Laravel \ Passport \ Http \ Middleware \ CheckClientCredentials 3360: class，]；然后在需要认证的接口路由文件routes/api.php前面添加这个中间件。

route : group([' prefix '=' cart '，'中间件'=['client.credentials'])，function(){ 0.});8.前端用户表客户模型的配置如下：

使用照明\基础\授权\用户作为可认证的；使用Laravel \ Passport \ HasApiTokens类Customer扩展了可验证的{ use HasApiTokens.}至此，后端的所有配置已经完成。

接下来，打开接口测试工具(postman)，输入接口地址：wechat.test/oauth/token,请求类型POST，填写以下参数，点击send，会看到后台返回前端需要的access_token:

前端(vue.js)

首先，加载用户登录组件，即用户登录页面。

1.配置路由，并在index.js文件中编写以下代码

从“@/组件/客户/登录”导入登录导出默认的新路由器({ routes: [.{ path: '/customer/login '，name: 'Login '，Component: Login }，]})2。加载组件，并在客户文件夹的Login.vue文件中编写以下代码：

模板差异输入类型=' email ' v-model=' customer。电子邮件占位符='请输入邮箱输入类型=' password ' v-model=' customer。“密码”占位符='请输入密码按钮@ click.prevent=' submit '登录/button /div/templatescript导出默认值{ data(){ return { customer : { email : ' '，password: '' } } }，methods: { submit() { //将数据配置好const data={ grant _ type : ' password '，//oauth的模式client_id: 1，//上面所说的client _ id client _ secret : ' co 331 C1 mqikggvvgidzpx4c uu 19 vseiqxm 7 LHD '，//同上用户名：这个。顾客。电子邮件，密码：这个。顾客。password，} this.axios.post('/oauth/token，data).然后(res={ if (res.status==200) { //如果成功了，就把访问令牌存入本地存储本地存储。token _ type=RES . data。token _ type本地存储。access _ token=RES . data。访问令牌此$路由器。push({ name : ' Index ' })} })} } } }/script客户端查看localStorage，如图：

3、在http.js文件中设置拦截器，用于判断用户是否登录，若没有登录跳转到登录页面。代码如下：

//#创建http.js文件从“axios”导入爱可信从" @/路由器"//axios导入路由器配置axios。默认值。超时=5000；axios。默认值。基本网址='http://wechat.test/'；//http请求拦截器axios。拦截器。请求。使用(配置={//将所有的爱可信的页眉里加上令牌类型和access _ token配置。标题。authorization=` $ {本地存储。token _ type } $ {本地存储。access _ token } `；返回配置；}，err={ return Promise。拒绝(错误)；});//http响应拦截器axios。拦截器。回应。使用(response={ return response},错误={ //401清除代币信息并跳转到登录页面if(错误。回应。状态==401){警报('您还没有登录，请先登录)路由器。替换({ //如果失败，跳转到登录页面名称：“登录”})返回答应我。拒绝(错误。回应。数据)})；导出默认爱可信重新访问项目，在商品详情页面点击加入购物车，你会发觉奇迹已经出现，当你没有登录时，提示跳转到登录页面。输入账号密码，登录成功，此时就能拿到用户身份证。接下来，继续测试。

4、去手推车控制器中，找到购物车首页方法，获取用户的id，获取方式如下：

$ customer _ id=auth(' API ')-user()-id；返回$ customer _ id5，在邮递员中输入购物车首页接口地址，并传入所需参数，参数参考地址：http://laravelacademy.org/post/8909.html，如图：

拿到用户编号后，把后端之前定义的客户编号全部改为通过接口方法获取。至此，护照接口认证的全部操作已完成。

总结：接口认证逻辑思想

1、安装护照后，生成客户端编号和客户端_机密

2、使用用户名、密码、客户端身份证、客户端密码、授权类型参数，调用/oauth/token接口，拿到访问令牌

3、需要认证的接口，加上中间件。这时候直接访问接口地址，会提示没有认证的。带上访问令牌后，才能拿到接口的数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。