很多企业做项目使用前后端分离，后端提供接口地址，前端使用接口地址拿数据，并渲染页面。那么，前端用户登录如何使用接口进行认证？网上各种教程写的不堪入目，完全看不懂，所以我根据自己的理解，写下此篇文章，希望能帮助到大家。
后端(Laravel5.6框架)
1、使用 composer 安装 Passport ，打开终端，执行命令：
2、接下来，将 Passport 的服务提供者注册到配置文件 config/app.PHP 的 providers 数组中
3、执行数据库迁移
4、创建密码授权客户端
5、获取keys
6、配置路由
打开服务提供者 AuthServiceProvider ， 在 boot 方法中加入如下代码:
然后将配置文件 config/auth.PHP 中授权看守器 guards 的 api 的 driver 选项改为 passport
我这里的 customer 表是前端用户表,但是 laravel 默认的是 user 表，所以这里需要做如下配置：
7、注册中间件，在 app/Http/Kernel.PHP 文件中的 $routeMiddleware 数组中添加如下中间件
然后在需要认证接口路由文件 routes/api.PHP 前面加上这个中间件。
8、前端用户表 customer 模型里面做如下配置：
class Customer extends Authenticatable
{
use HasApiTokens;
....
}
至此，后端的所有配置已完成。
接下来，打开接口测试工具（postman），输入接口地址： wechat.test/oauth/token,请求类型 POST ，填上如下参数,点击 send 你会看到后台返回了前端所需的 access_token ：
前端(vue.js)
2、加载组件，在 customer 文件夹的 Login.vue 文件中写入如下代码：
客户端查看 localStorage ，如图：
3、在 http.js 文件中设置拦截器，用于判断用户是否登录，若没有登录跳转到登录页面。代码如下：
axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://wechat.test/';
// http request 拦截器
axios.interceptors.request.use(
config => { //将所有的axios的header里加上token_type和access_token
config.headers.Authorization = ${localStorage.token_type} ${localStorage.access_token};
return config;
},err => {
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},error => {
// 401 清除token信息并跳转到登录页面
if (error.response.status == 401) {
alert('您还没有登录，请先登录')
router.replace({ //如果失败，跳转到登录页面
name: 'Login'
})
}
return Promise.reject(error.response.data)
});
export default axios;
重新访问项目，在商品详情页面点击加入购物车，你会发觉奇迹已经出现，当你没有登录时，提示跳转到登录页面。输入账号密码，登录成功，此时就能拿到用户id。接下来，继续测试。
4、去 Cart 控制器中，找到购物车首页方法，获取用户的id，获取方式如下：
5、在 postman 中输入购物车首页接口地址，并传入所需参数，参数参考地址： http://laravelacademy.org/post/8909.html ，如图：
拿到用户id后，把后端之前定义的customer_id全部改为通过接口方法获取。至此， Passport 接口认证的全部操作已完成。
总结：接口认证逻辑思想
1、安装passport后，生成client_id和 client_secret
2、使用username、password、client_id、client_secret、grant_type参数，调用/oauth/token接口，拿到access_token
3、需要认证的接口，加上中间件。这时候直接访问接口地址，会提示没有认证的。带上access_token后，才能拿到接口的数据。
