typescript - 不存在带有属性的 NuxtJS Auth 错误

Question

我刚刚在我的项目中安装了 @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。

请问你有什么想法吗？

Answer 1

使用 NuxtJs 将 Typescript 添加到 vueJs 项目时会导致此问题。
这个warn of types的解决方法，发布在define types Define Typed/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