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

Posted 2023-02-22

【中文标题】Nuxt.js + Auth（jwt 刷新令牌）

【英文标题】：Nuxt.js + Auth ( jwt refresh token )

【发布时间】：2020-12-05 18:25:15

【问题描述】：

我为我的 Vue/Nuxt 项目使用了 Auth 库。 JWT Authentication 对我来说很好用，但是 refresh token 有问题。

首先refreshToken cookie 总是设置为null：

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

this.$auth.refreshTokens 不是函数

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

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

对于一个shortcat，下面是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
      
    
 ,

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

【问题讨论】：

兄弟有什么更新吗？

很遗憾没有。我想我需要自己编写刷新令牌机制。我目前正在处理我的应用程序的其他部分。

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

这仍然是开发文档吗？我正在查看auth.nuxtjs.org/schemes/refresh，这似乎是官方的，我仍然遇到与 OP 相同的问题

【参考方案1】：

我想我做到了，让我与你分享我所做的 我写了一个叫 auth 的插件，这个插件基本上就是下面这个

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

这是插件代码

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);    

祝你有美好的一天

【讨论】：

我想知道如何使用 CI4 和 php-jwt 库来做到这一点：')

哦，还有，当 jwt-auth (php) 模块要求令牌还没有过期时，如何向/refresh 端点发出请求？

【参考方案2】：

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

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

【讨论】：

拯救了我的一天，谢谢！与@nuxt/auth-next 一起使用

【参考方案3】：

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

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
                
            );

【讨论】：

你应该解释它为什么起作用或者是什么部分使它起作用。还有一件事，看起来您正在从客户端发送客户端和密钥，这是一种滥用身份验证系统的简单方法。