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 项目时引起的。

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

1. 您需要在根项目 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

Answer 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
    ]