祝你们一切安好!
我目前正在开发一个Vue 3应用程序,Pinia作为我的商店,Auth 0 Vue SDK用于身份验证/授权,Axios用于调用我的后端API。
在Auth 0文档中,他们建议每次调用后端API时都使用getAccessTokenSilently()方法检索访问令牌:
const { getAccessTokenSilently } = useAuth0();
const accessToken = await getAccessTokenSilently();
问题是,每当我在组件文件中使用axios调用带有访问令牌的后端API时,我都必须键入此代码。
由于端点太多,我的计划是在axios请求拦截器中传递一次访问令牌,然后使用Pinia操作调用我的API。
我在应用程序中创建了一个/config/axios.js
文件,其中包含以下内容:
//Import Axios Library and Auth0
import axios from 'axios';
import { useAuth0 } from "@auth0/auth0-vue"
//Create instance of axios
const instance = axios.create({
baseURL: 'http://localhost:5000/api/v1'
});
// Create a request interceptor for my instance and get accessToken on the fly
instance.interceptors.request.use(async (config) => {
const { getAccessTokenSilently } = useAuth0();
const accessToken = await getAccessTokenSilently();
config.headers['Authorization'] = accessToken;
return config;
}, (error) => {
return Promise.reject(error)
});
export default instance;
很简单,只需创建一个baseURL并拦截请求,以添加带有访问令牌的授权头。
现在,在Pinia中,我创建了一个用户存储,它将使用如下所示的axios配置来获取用户:
//Import the Pinia Library
import { defineStore } from 'pinia'
//Import the Axios Library for API calls
import axiosConfig from "@/config/axios.js"
export const useUserStore = defineStore('user', {
state: () => ({
user:{}
}),
getters: {
getUser(state){
return state.user
}
},
actions: {
async fetchUser(){
try {
const data = await axiosConfig.get('/profile')
this.user = data.data
} catch (error) {
console.log("User Pinia error: " + error)
}
}
},
})
最后,在我的组件文件中,我只导入商店并调用Pinia操作fetchUsers
。
当尝试axios调用时,我得到以下错误!
类型错误:* 验证0_auth0_vue__WEBPACK_IMPORTED_MODULE_5 *_.未定义使用验证0()
我不知道如何在拦截器函数中从auth 0库检索访问令牌。
1条答案
按热度按时间mxg2im7a1#
类似的问题也在auth 0-vue github上提出:https://github.com/auth0/auth0-vue/issues/99
上面的链接描述了许多方法。我去了插件的方法,这是描述在这公关,即:https://github.com/auth0-samples/auth0-vue-samples/commit/997f262dabbab355291e5710c51d8056a5b142cf
但这个问题通过提供一种机制来正式解决,允许SDK从vue组件外部:https://github.com/auth0/auth0-vue/issues/99#issuecomment-1099704276