代码之家 › 专栏 › 技术社区 › Alfred Balle

Vue.js中回调的错误位置中有意外的文本

eslint vue.js node.js javascript

Alfred Balle · 技术社区 · 7 年前

我正试图遵循本教程: https://developer.okta.com/blog/2017/09/14/lazy-developers-guide-to-auth-with-vue

但是得到了:

 ERROR  Failed to compile with 1 errors    
 error  in ./src/auth.js

  â  https://google.com/#q=standard%2Fno-callback-literal  Unexpected literal in error position of callback
  src/auth.js:7:15
        if (cb) cb(true)
                 ^
      â  https://google.com/#q=standard%2Fno-callback-literal  Unexpected literal in error position of callback
  src/auth.js:14:17
          if (cb) cb(true)
                   ^
      â  https://google.com/#q=standard%2Fno-callback-literal  Unexpected literal in error position of callback
  src/auth.js:17:17
          if (cb) cb(false)
                   ^
      â  https://google.com/#q=standard%2Fno-callback-literal  Unexpected literal in error position of callback
  src/auth.js:43:7
        cb({
         ^
      â  https://google.com/#q=standard%2Fno-callback-literal  Unexpected literal in error position of callback
  src/auth.js:48:7
        cb({ authenticated: false })
         ^
â 5 problems (5 errors, 0 warnings)

Errors:
  5  https://google.com/#q=standard%2Fno-callback-literal

 @ ./src/router/index.js 3:0-26
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080

失败的代码如下:

/* globals localStorage */

export default {
  login (email, pass, cb) {
    cb = arguments[arguments.length - 1]
    if (localStorage.token) {
      if (cb) cb(true)
      this.onChange(true)
      return
    }
    pretendRequest(email, pass, (res) => {
      if (res.authenticated) {
        localStorage.token = res.token
        if (cb) cb(true)
        this.onChange(true)
      } else {
        if (cb) cb(false)
        this.onChange(false)
      }
    })
  },

  getToken () {
    return localStorage.token
  },

  logout (cb) {
    delete localStorage.token
    if (cb) cb()
    this.onChange(false)
  },

  loggedIn () {
    return !!localStorage.token
  },

  onChange () {}
}

function pretendRequest (email, pass, cb) {
  setTimeout(() => {
    if (email === 'joe@example.com' && pass === 'password1') {
      cb({
        authenticated: true,
        token: Math.random().toString(36).substring(7)
      })
    } else {
      cb({ authenticated: false })
    }
  }, 0)
}

所以总的来说 if (cb) cb(X) .

尝试谷歌的东西似乎 cb(false) 和 cb(true) 是不允许的,但是我被困在如何用这个例子轻松解决它。

这是我的登录代码:

  import auth from '../auth'
  export default {
    data () {
      return {
        email: 'joe@example.com',
        pass: '',
        error: false
      }
    },
    methods: {
      login () {
        auth.login(this.email, this.pass, loggedIn => {
          if (!loggedIn) {
            this.error = true
          } else {
            this.$router.replace(this.$route.query.redirect || '/')
          }
        })
      }
    }
  }

2 回复 | 直到 7 年前

FINDarkside 7 年前

这似乎是由您使用的一些代码linting工具引起的。它认为需要传递错误作为回调的第一个参数。您可以通过更改 cb 除了CB或回叫之外的其他东西。

这是如何使用登录回调,首先出现错误:

auth.login(this.email, this.pass, (err, loggedIn) => {
  if (err) {
    // Probably do something with the error
    // LoggedIn isn't really necessary, unless it contains some info about the logged in user
    this.error = true
  } else {
    this.$router.replace(this.$route.query.redirect || '/')
  }
})

adelriosantiago 6 年前

在Eslint批准 no-callback-literal 规则。

但是 many many 抱怨。我看到它被移除或至少在不久的将来被修改。

目前它与express.js中处理错误的方式相匹配。实际上它不正确地匹配:

callback({foo: 'bar'})

同时,您可以通过更改.eslintrc.js来禁用它,以便规则如下所示:

'rules': {
  ...
  'standard/no-callback-literal': 0,
  ...
}