NuxtJS Auth 错误与属性不存在

Posted 2023-02-22

【中文标题】NuxtJS Auth 错误与属性不存在

【英文标题】：NuxtJS Auth error with property doesn't exist

【发布时间】：2020-01-22 21:18:35

【问题描述】：

我刚刚在我的项目中安装了 @nuxtjs/auth。

我得到Property '$auth' does not exist on type 'AuthLoginPage' 类。

登录类页面方法登录

this.$auth.loginWith('local', 
        data: 
          username: 'your_username',
          password: 'your_password'
        
      );

我的 nuxt.config.ts

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/pwa',
  ],
...
auth: 
    strategies: 
      local: 
        endpoints: 
          login: 
            url: 'http://127.0.0.1:3001/users/login',
            method: 'post',
            propertyName: 'token'
          ,
          logout: 
            url: 'http://127.0.0.1:3001/users/logout',
            method: 'post'
          ,
          user: 
            url: 'http://127.0.0.1:3001/users/me',
            method: 'get',
            propertyName: 'user'
          
        ,
        // tokenRequired: true,
        // tokenType: 'bearer'
      
    

我无法使用 NuxtJS Auth。

请问你有什么想法吗？

【问题讨论】：

你把它添加到 nuxt 配置了吗？如果是 - 显示你的配置

@Aldarund 是的，我添加了 nuxt.config.ts auth 配置插件。

您是否将其添加到 nuxt 配置的模块部分，您只显示了您的 nuxt 配置的一部分...？你在哪里称呼它？用什么方法？

@Aldarund 抱歉，我忘了完全添加配置 :) 我更新了第一条消息。你有什么想法吗？

在codesandbox上创建一个repro，没有它很难说

【参考方案1】：

这个问题是在使用 NuxtJs 将 Typescript 添加到 vueJs 项目时引起的。

这个类型警告的解决方法，发布在定义类型DefiniteTyped/DefinitelyTyped官网

您需要在根项目 types/index.d.ts 中创建一个文件并添加此代码

    <pre>
    // Type definitions for @nuxtjs/auth 4.8
    // Project: https://auth.nuxtjs.org
    // Definitions by: Ruskin Constant <https://github.com/jonnyparris>
    //                Daniel Leal <https://github.com/danielgek>
    //                Nick Bolles <https://github.com/NickBolles>
    // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
    // TypeScript Version: 3.1

    import Vue,  ComponentOptions  from 'vue';

    export interface Storage 
      setUniversal(key: string, value: any, isJson?: boolean): string;
      getUniversal(key: string, isJson?: boolean): any;
          syncUniversal(key: string, defaultValue: any, isJson?: boolean): any;
      // Local State
      setState(key: string, val: any): string;
      getState(key: string): string;
      watchState(key: string, handler: (newValue: any) => void): any;
      // Cookies
      setCookie(key: string, val: any, options?: object): any;
      getCookie(key: string, isJson?: boolean): any;
      // Local Storage
      setLocalStorage(key: string, val: any, isJson?: boolean): any;
      getLocalStorage(key: string, isJson?: boolean): any;
    

    export interface Auth<T = any> 
      ctx: any;
      $state: any;
      $storage: Storage;
      user: Partial<T>;
      loggedIn: boolean;
      loginWith(strategyName: string, ...args: any): Promise<never>;
      login(...args: any): Promise<never>;
      logout(): Promise<never>;
      fetchUser(): Promise<never>;
      fetchUserOnce(): Promise<never>;
      hasScope(scopeName: string): boolean;
      setToken(strategyName: string, token?: string): string;
      getToken(strategyName: string): string;
      syncToken(strategyName: string): string;
      onError(handler: (error: Error, name: string, endpoint: any) => void): any;
      setUser(user?: Partial<T>): any;
      reset(): Promise<never>;
      redirect(name: string): any;
    

    declare module 'vue/types/options' 
      interface ComponentOptions<V extends Vue> 
        auth?: boolean | string;
      
    

    declare module 'vue/types/vue' 
      interface Vue 
        $auth: Auth;
      
    

    </pre>

在你的 package.json 之后你需要添加类型和文件，添加这行

      "typings": "types/index.d.ts",
      "files": ["types/*.d.ts"],

接下来，您的警告消失no warning types

这是解决警告的指南

DefinitelyTyped/DefinitelyTyped

【参考方案2】：

Edwin Rendoon Cadivid 的答案有效，但这不是正确的方法。

我写了原始类型，我刚刚提交了另一个 PR 以直接将类型与 nuxt auth 捆绑：https://github.com/nuxt-community/auth-module/pull/486

在合并 PR 之后 从 @nuxtjs/auth v5 开始（在 typescript 中重写模块），您所要做的就是将 @nuxtjs/auth 添加到您的 types 数组中tsconfig.json

    "types": [
      "@nuxt/types", 
      "@nuxtjs/auth" // Add this line
    ]

---

目前，直到 PR 被合并运行 npm install --save-dev @types/nuxtjs__auth

然后将@types/nuxtjs__auth 添加到您的types 数组中的tsconfig.json

    "types": [
      "@nuxt/types", 
      "@types/nuxtjs__auth" // Add this line
    ]

【讨论】：

急于合并 PR 但还没有更新 :(

它被合并了，只是现在作为不同 PR 的一部分：github.com/nuxt-community/auth-module/pull/…> 实际上就是这个：github.com/nuxt-community/auth-module/pull/621

已合并但尚未发布。所以我求助于这个。谢谢

在middleware: (context)=>context.$auth 中使用时仍然可以得到它，“上下文”类型上不存在属性“$auth”

我仍然需要做选项 B