不存在带有属性的 NuxtJS Auth 错误 [英] NuxtJS Auth error with property doesn't exist

问题描述

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

我得到 属性 '$auth' 在类型 'AuthLoginPage' 类上不存在.

登录类页面方法登录

this.$auth.loginWith('local', {数据: {用户名:'你的用户名'，密码:'你的密码'}});

我的 nuxt.config.ts

模块:[//文档:https://axios.nuxtjs.org/usage'@nuxtjs/axios','@nuxtjs/auth','@nuxtjs/pwa',],...授权:{策略:{当地的: {端点:{登录: {url: 'http://127.0.0.1:3001/users/login',方法:'发布'，属性名称:'令牌'},登出: {url: 'http://127.0.0.1:3001/users/logout',方法:'发布'},用户:{url: 'http://127.0.0.1:3001/users/me',方法:'获取'，属性名称:'用户'}},//tokenRequired: true,//令牌类型:'承载'}}

我无法使用 NuxtJS Auth.

请问你有什么想法吗?

解决方案

使用 NuxtJs 将 Typescript 添加到 vueJs 项目时导致的这个问题.

这个warn of types的解决方法，发布在define types DefinelyTyped/DefinitelyTyped官网

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

<预>//@nuxtjs/auth 4.8 的类型定义//项目:https://auth.nuxtjs.org//定义:Ruskin Constant //Daniel Leal //Nick Bolles //定义:https://github.com/DefinitelyTyped/DefinitelyTyped//打字稿版本:3.1导入 Vue, { ComponentOptions } from 'vue';导出接口存储{setUniversal(key: string, value: any, isJson?: boolean): string;getUniversal(key: string, isJson?: boolean): any;syncUniversal(key: string, defaultValue: any, isJson?: boolean): any;//本地状态setState(key: string, val: any): string;getState(key: string): string;watchState(key: string, handler: (newValue: any) => void): any;//饼干setCookie(key: string, val: any, options?: object): any;getCookie(key: string, isJson?: boolean): any;//本地存储setLocalStorage(key: string, val: any, isJson?: boolean): any;getLocalStorage(key: string, isJson?: boolean): any;}导出接口 Auth{ctx:任何；$状态:任何；$storage:存储；用户:部分T；登录:布尔值；loginWith(strategyName: string, ...args: any): Promise;login(...args: any): Promise;注销():承诺<从不>；fetchUser(): Promise;fetchUserOnce(): Promise;hasScope(scopeName: string): boolean;setToken(strategyName: string, token?: string): string;getToken(strategyName: string): string;同步令牌(策略名称:字符串):字符串；onError(handler: (error: Error, name: string, endpoint: any) => void): any;setUser(user?: Partial<T>): any;重置():承诺<从不>；重定向(名称:字符串):任何；}声明模块vue/types/options"{interface ComponentOptions<V extends Vue>{身份验证?:布尔值|细绳;}}声明模块'vue/types/vue'{界面 Vue {$auth:认证；}}

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

 typings": types/index.d.ts",文件":[types/*.d.ts"]，

接下来，你的警告消失
无警告类型

这是解决警告的指南

DefinitelyTyped/DefinitelyTyped

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?

解决方案

This problem caused when you add Typescript to vueJs project with NuxtJs.

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

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

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

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

这篇关于不存在带有属性的 NuxtJS Auth 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！