Неожиданный литерал в ошибочной позиции обратного вызова в 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

Эта проблема после того, как ESLint утвердил правило no-callback-literal .

Однако есть много много жалоб на это.Я вижу, что он будет удален или, по крайней мере, изменен в ближайшем будущем.

В настоящее время он соответствует способу обработки ошибок в Express.JS.На самом деле он неверно соответствует:

callback({foo: 'bar'})

Между тем вы можете отключить его, изменив файл .eslintrc.js так, чтобы правила выглядели так:

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

Answer 2

Похоже, что это вызвано тем, что вы используете какой-либо инструмент для кодирования кода.Он думает, что вам нужно передать error в качестве первого аргумента для обратных вызовов.Вы можете обойти это, изменив имя функции с 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 || '/')
  }
})