Question

我正在尝试使用Vue和Vue-ressource创建一个App 实际上我需要使用ressource通过API调用来创建auth系统。但在我的Auth.js（我导入我的login.vue）控制台说他无法读取未定义的$ http。所以显然我无法达到'这个'（所以vue）。我错过了什么吗？或者它只是一个坏用途？

谢谢大家

实际上是我的main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueRouter)
Vue.use(VueResource)

import App from './components/App.vue'

import Login from './components/Login.vue'
import Home from './components/Containers.vue'


function requireAuth (to, from, next) {
  if (!auth.loggedIn()) {
    next({
      path: '/',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/home', name: 'home', component: Home, beforeEnter: requireAuth },
    { path: '/', component: Login },
    { path: '/logout',
      beforeEnter (to, from, next) {
        auth.logout()
        next('/')
      }}
  ]
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

login.vue

import auth from '../utils/auth'

export default {
  data () {
    return {
      email: '',
      pass: '',
      error: false
    }
  },
  methods: {
    login () {
      auth.login(this.email, this.pass, loggedIn => {
        if (!loggedIn) {
          this.error = true
        } else {
          console.log('good')
          this.$router.replace('/home')
        }
      })
    }
  }
}

和我的auth.js所在的vue-ressource帖子：

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(() => {
    this.$http.post('localhost:9000/api/login', {email: email, password: pass}).then(response => {
      if (response.status === 200) {
        cb({
          authenticated: true,
          token: Math.random().toString(36).substring(7)
        })
      } else {
        cb({ authenticated: false })
      }
    }, response => {
      console.log('error ' + response.status)
    })
  }, 0)
}

Answer 1

用axios替换vue-resource。容易做到。 Vue团队不再维护Vue资源，因此使用它是不好的选择。（https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.dwmy5ymjx）

Axios受到广泛支持。 https://github.com/mzabriskie/axios。

关于使用具有vue的axios的好的laracasts。你会很快得到它。 https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18
您无法访问auth模块中的Vue实例是正常的。尝试了解有关使用this的更多信息，您会很快得到它'为什么？'
要在您的身份验证模块中发出ajax请求，只需导入axios并使用axios.post / axios.get

有任何问题吗？评论，我会解释更多。

无法从js访问Vue

1 个答案: