登录类页面上的方法登录

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

将Typescript添加到vueJs和NuxtJs时会导致此问题。

此类型警告的解决方案，发布在官方网站上，定义类型为DefinitelyTyped / DefinitelyTyped

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

// 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;
  }
}

在packgage.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后，您只需在tsconfig.json中的@nuxtjs/auth数组中添加types

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

Answer 3

您是否在页面上启用了它？

export default {
   middleware: 'auth'
}

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

登录类页面上的方法登录

我的nuxt.config.ts

3 个答案: