Nuxt.js + Auth（jwt 刷新令牌）

Question

我在我的 Vue/Nuxt 项目中使用了 Auth 库。JWT 身份验证对我来说很好用，但刷新令牌有问题。

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

其次，当我调用 this.$auth.refreshTokens() 时出现错误：

this.$auth.refreshTokens 不是函数

我已经尝试了很长时间来解决这个问题，但我终于放弃了:(

你可以在我的 GitHub 上看到我的服务器端和客户端代码。

对于短猫，下面是 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', method: 'post' },
          user: { url: 'users/me', method: 'get', propertyName: '' },
          logout: false
        },
        // autoLogout: false
      }
    }
 },

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

Answer 1

我想我做到了，让我与你分享我做了什么我写了一个名为 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,$axios,token);
            } catch (e) {
                $auth.logOut();
            }
        })
    }

    setInterval(async function () {
        token = $auth.getToken(strategy)
        await refreshTokenF($auth, $axios, 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);    }

}

祝你今天过得愉快

Answer 2

您一直在查看 DEV 文档。刷新令牌将从 nuxt-auth 版本 5 开始提供。尝试安装 auth 模块的 dev 分支以访问refreshToken()

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