为什么我的Auth0 + Vue 3配置会抛出TypeScript类型错误？

错误原因 #

1. Vue 3的inject API默认返回unknown类型，TypeScript无法推断你通过插件provide注入的Auth实例的具体结构，因此访问实例方法时抛出Object is of type 'unknown'错误。
2. 你当前插件中定义的loginWithRedirect、logout等方法参数标记为必填，但调用时未传参数，修复类型问题后还会触发参数不匹配的报错。

修复步骤 #

1. 给Auth0插件补充实例类型定义 #

在你的Auth0插件代码文件中，新增实例类型接口，给authPlugin标注类型并导出该接口：

// 其他已有导入保持不变
import type { ComputedRef } from 'vue'

// 新增Auth0实例类型定义
export interface Auth0PluginInstance {
  isAuthenticated: ComputedRef<boolean>
  loading: ComputedRef<boolean>
  user: ComputedRef<User | undefined>
  getIdTokenClaims: (o?: GetIdTokenClaimsOptions) => ReturnType<Auth0Client['getIdTokenClaims']>
  getTokenSilently: (o?: GetTokenSilentlyOptions) => ReturnType<Auth0Client['getTokenSilently']>
  getTokenWithPopup: (o?: GetTokenWithPopupOptions) => ReturnType<Auth0Client['getTokenWithPopup']>
  handleRedirectCallback: () => Promise<void>
  loginWithRedirect: (o?: RedirectLoginOptions) => ReturnType<Auth0Client['loginWithRedirect']>
  logout: (o?: LogoutOptions) => ReturnType<Auth0Client['logout']>
}

// 给authPlugin标注类型
const authPlugin: Auth0PluginInstance = {
  // 原有属性方法保持不变
}

2. 调整方法参数为可选 #

你可以根据实际使用需求，把方法的必填参数改为可选（加?标记），匹配你调用时不传参数的场景：

// 原有方法定义修改参数为可选
function loginWithRedirect(o?: RedirectLoginOptions) {
  return client.loginWithRedirect(o);
}

function logout(o?: LogoutOptions) {
  return client.logout(o);
}

// 其他方法如果有需要也可以对应调整参数可选性

3. 组件注入时指定类型 #

在App.vue中导入Auth0PluginInstance接口，给inject指定泛型即可：

<script lang="ts">
import { defineComponent, inject } from "vue";
// 导入你在插件里定义的Auth0实例类型
import type { Auth0PluginInstance } from "你的Auth0插件文件路径";

export default defineComponent({
  name: "App",
  setup() {
    // 写法1：用非空断言，适合确定插件已正确初始化的场景
    const auth = inject<Auth0PluginInstance>("Auth")!;

    // 写法2：加非空判断，更安全
    // const auth = inject<Auth0PluginInstance>("Auth")
    // if (!auth) throw new Error("Auth0插件未正确安装")

    const login = (): void => {
      auth.loginWithRedirect();
    };
    const logout = (): void => {
      auth.logout({
        returnTo: window.location.origin,
      });
    };
    return {
      logout,
      login,
      ...auth,
    };
  },
});
</script>

内容的提问来源于stack exchange，提问作者TinyTiger