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

Question

我為我的 Vue/Nuxt 項目使用了 Auth 庫。 JWT 身份驗證對我來說很好，但刷新令牌有問題。

首先，refreshToken cookie 始終設置為 null：

其次，當我調用 this.$auth.refreshTokens() 時出現錯誤：

this.$auth.refreshTokens 不是 function

我已經嘗試了很長時間來解決這個問題，但我終於放棄了:(

你可以在我的 GitHub 上看到我的服務器端和客戶端代碼。

對於 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
      }
    }
 },

我已經檢查了客戶端配置文件和服務器中的所有名稱是否都符合。 預先感謝您的幫助，對於我的英語錯誤，我深表歉意，我已盡力...

Answer 1

我想我做到了，讓我與你分享我做了什么我寫了一個名為 auth 的插件，這個插件基本上與以下內容有關

• 檢查是否存儲了令牌
• 然后通過請求獲取用戶數據來檢查存儲的令牌是否已過期
• 如果請求失敗，我們向/refresh端點發出請求，該端點刷新請求標頭中的當前令牌，然后在響應中將其發送回
• 我們獲取這個新令牌並存儲在客戶端
• 如果refresh請求也失敗，我們清除了授權 object

這是插件代碼

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)

}

也看看我的 controller 刷新令牌

<?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 文檔。 refreshToken 將從 nuxt-auth 版本 5 開始提供。 嘗試安裝 auth 模塊的 dev 分支以訪問 refreshToken()

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

Answer 3

正如@Hvitis 已經指出的那樣， @nuxt/auth < 5的版本不支持此功能。 為了使用文檔中指示的最新版本package ，您必須添加@nuxt/auth-next package - 這會將版本 5.0.0 添加到您的 Nuxt 應用程序。

yarn add @nuxt/auth-next

在nuxt.config.js ，注冊模塊 - 確保你也排除了@nuxt/auth -，並添加如下refresh模式：

export default {
    ...
    modules = [
        ...
        "@nuxtjs/axios",
        "@nuxt/auth-next"
    ],
    ...
    auth: {
        strategies: {
            local: {
                  scheme: 'refresh',
                  token: {
                      property: 'access',
                      maxAge: 300,
                      global: true,
                      // type: 'Bearer'
                  },
                  refreshToken: {
                      property: 'refresh',
                      data: 'refresh',
                      maxAge: 60 * 60 * 24
                  },
                  user: {
                      property: 'data',
                      // autoFetch: true
                  },
                  endpoints: {
                      login: { url: 'api/token/', method: 'post' },
                      refresh: { url: 'api/token/refresh/', method: 'post' },
                      user: { url: 'api/current_user/', method: 'get' },
                      logout: false
                  }
                }
           }
    },
    ...

Answer 4

這是我為使其工作所做的工作：

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,
            }
        },
    }

user property: false標志很重要，因為我的用戶有效負載直接在響應中包含所有用戶字段：

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

登錄.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
                }
            });