Nuxt.js + Authjwt刷新令牌

如何解决Nuxt.js + Authjwt刷新令牌

我已经为我的Vue / Nuxt项目使用了Auth库。 JWT身份验证对我来说很好，但是refresh token出了问题。

首先，refreshToken cookie始终设置为null：

第二，当我调用this。$ auth.refreshTokens（）时出现错误：

this。$ auth.refreshTokens不是函数

我已经尝试了很长时间来解决这个问题，但是我最终放弃了：（

您可以在GitHub上看到我的server side和client side代码。

对于猫咪来说，以下是nuxt.config.js文件的片段：

   auth: {
    strategies: {
      local: {
        scheme: 'refresh',token: {
          property: 'token',maxAge: 30,// type: 'Bearer'
        },refreshToken: {
          property: 'refreshToken',data: 'refreshToken',maxAge: 60
        },user: {},endpoints: {
          login: { url: 'users/login',method: 'post' },refresh: { url: 'users/refreshToken',user: { url: 'users/me',method: 'get',propertyName: '' },logout: false
        },// autoLogout: false
      }
    }
 },

我已经检查了客户端配置文件和服务器中的所有名称是否都符合。 预先感谢您的帮助，对于我的英语错误，我深表歉意，我已尽力...

解决方法

我想我做到了，让我与您分享我的所作所为 我在下面编写了一个名为auth的插件

• 检查是否存储了令牌
• 然后通过请求获取用户数据来检查存储的令牌是否已过期
• 如果请求失败，我们将向/refresh端点发出请求，端点将刷新请求标头中的当前令牌，然后将其发送回响应中
• 我们使用这个新令牌并存储在客户端中
• 如果refresh请求也失败了，我们清除了auth对象

这是插件代码

const strategy = 'local'
const FALLBACK_INTERVAL = 900 * 1000 * 0.75

async function refreshTokenF($auth,$axios,refreshToken) {
    try {
        const response = await $axios.post('/refresh')
        let token = 'Bearer ' + response.data.token
        console.log(refreshToken);
        console.log(token);
        $auth.setToken(strategy,token)
        $axios.setToken(token)
        return decodeToken.call(this,token).exp
    } catch (error) {
        $auth.logout()
        throw new Error('Error while refreshing token')
    }
}

export default async function ({app}) {

    const {$axios,$auth} = app

    let token = $auth.getToken(strategy)
    let refreshInterval = FALLBACK_INTERVAL
    if (token) {
        $axios.get('/me').then((resp) => {
            $auth.setUser(resp.data.data)
        }).catch(async () => {
            try {
                await refreshTokenF($auth,token);
            } catch (e) {
                $auth.logOut();
            }
        })
    }

    setInterval(async function () {
        token = $auth.getToken(strategy)
        await refreshTokenF($auth,token)
    },refreshInterval)

}

也请查看我的控制器以刷新令牌

<?php


namespace App\Http\Controllers\Api\Auth;


use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Mpdf\Tag\THead;
use Tymon\JWTAuth\JWTAuth;

class RefreshController extends Controller
{

    protected $auth;
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct(JWTAuth $auth)
    {
        $this->auth = $auth;
    }

    public function refresh(Request  $request)
    {
        $this->auth->setRequest($request);
        $arr = $this->auth->getToken();
        $arr = $this->auth->refresh();
        $this->auth->setToken($arr);
        return response()->json([
            'success' => true,'data' => $request->user(),'token' => $arr
        ],200);    }

}

祝你有美好的一天

,

您一直在查看DEV文档。 refreshToken将在nuxt-auth的版本5中提供。尝试安装auth模块的dev分支以访问refreshToken（）

https://github.com/nuxt-community/auth-module/issues/761

,

这是我为使其工作所做的工作：

npm install --save @nuxtjs/auth-next

nuxt.config.js

    strategies: {
        refresh: {
            scheme: 'refresh',token: {
                property: 'access_token',maxAge: 1800,global: true,},refreshToken: {
                property: 'refresh_token',data: 'refresh_token',maxAge: 60 * 60 * 24 * 30,user: {
                property: false,endpoints: {
                login: {
                    url: `${process.env.OAUTH_URL}/oauth/token`,method: "post",propertyName: false
                },user: {
                    url: `${process.env.OAUTH_URL}/api/user`,method: 'get',logout: false,}
        },}

用户 property: false 标志很重要，因为我的用户负载在响应中直接包含所有用户字段：

{
    id: '',email: '',name: '',role: '',}

login.vue

            await this.$auth.loginWith("refresh",{
                data: {
                    grant_type: "password",client_id: process.env.CLIENT_OAUTH_ID,client_secret: process.env.CLIENT_OAUTH_KEY,scope: "*",username: this.credentials.email,password: this.credentials.password
                }
            });