Laravel——Api认证之Passport使用

目前，先后端分离时愈来愈多了，后端只须要提供一个Api接口解能够了，可是，登陆问题怎么解决呢？下面就来介绍如何使用laravel有效解决登陆问题。

思路流程

1. 因为在前端页面，每一个用户确定都有本身单独的模块，因此咱们后端须要返回各自用户的数据。
2. 用户首先进行登陆，后台利用Passport官方包，给该用户返回一个access_token（暗号）
3. 用户获取到access_token（暗号）,而后存在本地的localstorage里或者是vuex的state里（前提时用vue的，其余框架同理）。
4. 而后在用户模块访问后台的时候按要求带上access_token访问。
5. 后台就能够根据access_token查到对应的用户，查出数据，返回给前端。

安装

• 使用composer安装Passport：
  

composer require laravel/passport
复制代码

• 接下来，将 Passport 的服务提供者注册到配置文件 config/app.php 的 providers 数组中：
  

Laravel\Passport\PassportServiceProvider::class,
复制代码

• 而Passport服务时官方包，有自带的数据库迁移目录，因此直接能够用命令执行迁移来自动建立存储各类信息的数据表

php artisan migrate
复制代码

• 而后建立密码受权客户端

php artisan passport:client --password
# 建立了client_id和client_secret,前端登陆验证的时候必须把这两个玩意带着哟
复制代码

• 建立了密码受权客户端就能够按如下要求获取access_token了。以vue+axios举例

(这里为了防止不太会axios的小伙伴，在main.js进行配置一下。)

import axios from 'axios'
Vue.prototype.axios = axios
//安装好axios包以后，在根目录的main.js里添加上面的两行代码，注意放到引入Vue的下面。
复制代码

你确定会问传到后台的data client_id 和 client_secret是什么? 说简单点，其实就是表示你前端要用到这个passport来验证的一个暗号。

• 这个时候你就须要打如下命令获取这两玩意。

php artisan passport:keys
# 获取到了，而后记住这两个东西，没有记住，也能够在数据库里的oauth_clients表里去看哟
复制代码

以上须要跑的命令基本就跑完了 ， 接下来就时配置方面的了。

配置

• 首先， 得让安装的Passport服务在认证服务提供AuthServiceProvider的boot方法中调用Passport::routes函数。若是令牌须要有效期和刷新时间看下图：

public function boot() {
        $this->registerPolicies();  //注册

        Passport::routes(); //认证的路由
        Passport::tokensExpireIn(Carbon::now()->addHours(3));   //令牌有效期3小时
        Passport::refreshTokensExpireIn(Carbon::now()->addDays(30));    //令牌刷新时间30
    }
复制代码

若是以为时间过长或者太短，您还可使用addMinutes()或者时addMonths()均可以的。

• 最后，将配置文件 config/auth.php中受权看守器 guards 的 api 的 driver 选项改成 passport。此调整会让你的应用程序在在验证传入的 API 的请求时使用 Passport 的 TokenGuard 来处理：

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

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],
复制代码

设置中间件和路由

• 首先须要在 app/Http/Kernel.php 的 $routeMiddleware 变量中添加新的中间件：

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

• 而后在须要的模块路由routes/api.php前面加上这个中间件。

//用户
 Route::get('/customer', 'customerController@index')->middleware('client.credentials');
复制代码

前端的登陆测试

后端已经基本都配置好了，那么再就须要前端进行登陆按要求发送请求给后端了。

//前面已经说了，咱们会用到client_id和client_secret这个时候就要派上用场了哟。
    //请看如下html的代码
    <template>   
    <input type="email" v-model="userInfo.email" placeholder="请输入邮箱"> <input type="password" v-model="userInfo.password" placeholder="请输入密码"> <button @click.prevent="submit">登 录</button> </template> //请看vue里的代码 <script> export default { data() { return { userInfo: { email: '', password: '' } } }， methods: { submit() { //将数据配置好 const data = { grant_type: 'password', //oauth的模式 client_id: 1, //上面所说的client_id client_secret: '5wq3G7wv0ZuK7Qj6aFtwZaX6XyfLLa8hLSDDJyAB',//同上 username: this.userInfo.email, password: this.userInfo.password, } this.axios.post('http://your domain/oauth/token', data) .then(res => { if(res.status == 200) { //若是成功了 //将收到的token_type和access_token存到localStorage里 localStorage.token_type = res.data.token_type localStorage.token_token = res.data.access_token //登陆成功跳转到你想跳转的地址 ... } }) } } } </script> 复制代码

经过这样的请求，只要后端配置好了，基本就能收到如下的json

固然从咱们上面的代码能够看出，咱们也已经将重要的东西 access_token和 token_type存了起来啦。

axios的配置

终于把令牌access_token和令牌类型token_type拿到手了。那么后面，咱们前端只要涉及到api认证的请求（咱们这里拿我的中心作例子）就应该把这两个玩意带着发送给后端，这样后端就能够分辨是哪一个用户的请求了，也就能够返回相应的信息了。

好了，这个时候就须要配置一下axios了哟，把之后的请求都带上这两玩意就是了，简单、舒服。请看如下的配置，咱们这里单首创建一个http.js从新配置了axios。

//#建立http.js文件
import axios from 'axios'
import router from '@/router'

// axios 配置
axios.defaults.timeout = 5000;
// axios.defaults.baseURL = 'https://api.github.com';

// 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;       //而后再次export出去，嘿嘿 main.js那里就得改改咯
复制代码

//#main.js文件
//将原来上面配置的 import axios from 'axios'
//改为
import axios from './http'  //这里个人http.js是和main.js同一目录。
复制代码

我的用户页面测试

都配置好啦，接下来，拿用户中心页面来获取用户的信息了。

<script>
    export default {
        data() {
            return {
                user[]
            }
        },
        created() {
            this.getUser()
        },
        methods: {
            getUser() {
                this.axios.get('http://your domain/api/customer')
                    .then(res => {
                        console.log(res)
                        this.user = res.data    //将获得的用户信息,传给user。
                    })
            }
        }
    }
</script>
复制代码

哇，终于获取到登陆的那个用户的用户信息了哟。不过......

后台怎么解析token拿到用户信息。

还有最后的一个问题， 后台根据怎么根据前端发送的access_token来查询到用户信息发送给前端呢。

打开你的User模型User.php，一般放在Http目录下。 在文件里的上面加上use Laravel\Passport\HasApiTokens;而后User类里，也别忘了加上 use Notifiable,HasApiTokens;这个就是用来根据token来获取user信息的。

#CustomerController@index方法里。
    $user = auth('api')->user();
    return $user;       //成功将用户信息返回给前端啦。
复制代码

就这样完美结束啦。欢迎吐槽~