$auth 为空的问题

Question

我正在使用 Vue.js 构建 Web 应用程序。我正在尝试通过 Auth0 Vue SDK Quickstart 添加 Auth0。我能够让用户登录并在个人资料页面上显示他们的用户信息。 $auth 在我的所有 Vue 组件中都有效。

问题是我正在尝试使用 Axios 创建一个 API 客户端，该客户端使用拦截器添加授权 header。当我尝试使用 $auth.getTokenSilently() 时，$auth 始终为空。我正在做与 https://forum.vuejs.org/t/using-auth0-spa-with-axios-wrapper/79187/3. I also tried to use this https://community.auth0.com/t/issue-with-auth-being-null/44642 非常相似的事情来解决这个问题，但是 getInstance() 为空。

这是我的 main.js

Vue.use(Auth0Plugin, {
  domain,
  clientId,
  onRedirectCallback: appState => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname

const myApp = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

export default myApp;

Repository.js

import axios from 'axios';
import myApp from "@/App";

const baseDomain = 'http://localhost:8000';
const baseURL = `${baseDomain}/api`;

export const httpClient = axios.create({
  baseURL: baseURL,
  headers: {
    "Context-Type": "application/json"
  }
});

httpClient.interceptors.request.use(async (config) => {
  const token = await myApp.$auth.getTokenSilently(); 
  config.headers['Authorization'] = `Bearer ${token}`;
  return config
}, (error) => {
  return Promise.reject(error);
})

然后在我的 store.js 中，我使用工厂模式来使用 httpClient。如果您有任何想法，请告诉我！

编辑进一步查看问题似乎我需要使用承诺加载 Auth0 插件以确保它在使用前已加载。

Answer 1

看过 the tutorial 之后，我想说最简单的方法是将 Auth0 Vue 实例作为全局属性添加到 Vue，例如这在你的插件中

export const Auth0Plugin = {
  install(Vue, options) {
    const auth = useAuth0(options)

    Vue.$auth = auth // global property
    Vue.prototype.$auth = auth // instance property
  }
}

然后您可以在 Axios 拦截器中访问它

import axios from 'axios';
import Vue from "vue";

// snip

const token = await Vue.$auth.getTokenSilently();

另见 https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin

Answer 2

在尝试了几种不同的解决方案后，这个解决方案奏效了！请务必等待操作。

https://community.auth0.com/t/auth0-client-is-null-in-vue-spa-component-on-page-refresh/38147/6?u=simisav

$auth 为空的问题

Issue with $auth being null

vue.js

auth0

axios