Vue.JS 中回调的错误位置出现意外文字

Question

我正在尝试按照本教程进行操作：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)。

尝试 Google 这些东西似乎 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 || '/')
          }
        })
      }
    }
  }

Answer 1

这似乎是由您使用的某些代码检查工具引起的。它认为您需要将错误作为回调的第一个参数传递。您可以通过将函数名称从 cb 更改为 cb 或 callback 以外的名称来解决这个问题。

这是您首先使用错误登录回调的方式：

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 || '/')
  }
})

Answer 2

ESLint 批准 no-callback-literal 规则后出现此问题。

然而，有many many抱怨它。我看到它在不久的将来会被删除或至少被修改。

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

callback({foo: 'bar'})

与此同时，您可以通过更改 .eslintrc.js 来禁用它，使规则如下所示：

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

Answer 3

根据 standardJS，不允许在回调文字中进行 linting。所以 callback({foo: 'bar'}) 可以这样写：

let somedata = {foo: 'bar'}    
callback(somedata)

所以cb({ authenticated: false }) 这可以相应地格式化。

Vue.JS 中回调的错误位置出现意外文字

Unexpected literal in error position of callback in Vue.JS

javascript

node.js

eslint

vue.js