I have used Auth library for my Vue/Nuxt project. JWT Authentication works for me just fine, but there is a problem with refresh token .
First of all refreshToken cookie is always set to null:
Secondly, when i call this.$auth.refreshTokens() i got an error:
this.$auth.refreshTokens is not a function
I have been trying for a long time to solve this, but i finally give up:(
You can see my server side and client side code on my GitHub.
For a shortcat, below is fragment of nuxt.config.js file:
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
}
}
},
I have already checked if all names in the client config file and server are meet. Thank you in advance for your help and i am so sorry for mistakes in my English, i did my best...
I think I made it, let me share with you what i did I worte a plugin called auth this plugin basicly co the following
/refresh
endpoint which refresh the current token in the request headers then send it back in the responserefresh
request fails too, we cleared the auth objectThis is the plugin code
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)
}
Also have a look on my controller to refresh the token
<?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); }
}
Have a nice day
You have been looking at DEV docs. The refreshToken will be available from version 5 of nuxt-auth. Try installing dev branch of auth module to have access to refreshToken()
As already pointed out by @Hvitis, this is not supported on versions < 5
of @nuxt/auth
. In order to use the newest version of the package instructed in the docs , you have to add the @nuxt/auth-next
package - which will add version 5.0.0 to your Nuxt application.
yarn add @nuxt/auth-next
On the nuxt.config.js
, register the module - make sure you exclude @nuxt/auth
as well -, and add the refresh
schemas as below:
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
}
}
}
},
...
Here is what I did to make it work:
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,
}
},
}
The user property: false
flag is important because my user payload has all the user fields directly in the response:
{
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
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.