NuxtJS Auth error with property doesn't exist

问题

I've just installed @nuxtjs/auth on my project.

I get Property '$auth' does not exist on type 'AuthLoginPage' class.

Method login on login class page

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

My 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'
      }
    }

It's impossible for me to use NuxtJS Auth.

Have you got an idea please?

回答1:

This problem caused when you add Typescript to vueJs proyect whit NuxtJs.

The solution of this warn of types, posted in official web of define types DefinitelyTyped/DefinitelyTyped

1. you need create a file in your root project types/index.d.ts and add this code

   // Type definitions for @nuxtjs/auth 4.8
   // Project: https://auth.nuxtjs.org
   // Definitions by: Ruskin Constant 
   //                Daniel Leal 
   //                Nick Bolles 
   // 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 {
     ctx: any;
     $state: any;
     $storage: Storage;
     user: Partial;
     loggedIn: boolean;
     loginWith(strategyName: string, ...args: any): Promise;
     login(...args: any): Promise;
     logout(): Promise;
     fetchUser(): Promise;
     fetchUserOnce(): Promise;
     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): any;
     reset(): Promise;
     redirect(name: string): any;
   }
   
   declare module 'vue/types/options' {
     interface ComponentOptions {
       auth?: boolean | string;
     }
   }
   
   declare module 'vue/types/vue' {
     interface Vue {
       $auth: Auth;
     }
   }
   
   

after in your packgage.json you need add the typings and files, add this lines

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

next, your warning disappear
no warning types

this is the guide for solve warning

DefinitelyTyped/DefinitelyTyped

回答2:

Edwin Rendoon Cadivid's answer works, but it's not the right way to do it.

I wrote the original typings and I just submitted another PR to bundle the typings with nuxt auth directly: https://github.com/nuxt-community/auth-module/pull/486

After that PR is merged as of @nuxtjs/auth v5 (which re-writes the module in typescript) all you will have to do is add @nuxtjs/auth to the types array in your tsconfig.json

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

---

For now, until the PR is merged run npm install --save-dev @types/nuxtjs__auth

Then add @types/nuxtjs__auth to you're types array in your tsconfig.json

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

来源：https://stackoverflow.com/questions/58051668/nuxtjs-auth-error-with-property-doesnt-exist