Websanova/vue-auth with vue js 2.x about vue-auth

[websanova]

Hmm, can you send version of all dependencies...

On Tue, Oct 18, 2016 at 5:51 PM, Nuno [email protected] wrote:

I'm converting one application that is in vue js 1.x to 2.x, whats happens
is that the websanova/vue-auth, when i try to login in or register, always
ends up with this error

Uncaught (in promise) TypeError: t.headers.set is not a function(…)

changed my configurations from:

Vue.use(Auth, {
rolesVar: 'role',
router: router,
http: Vue.http,
loginUrl: 'auth/login',
fetchUrl: 'utilizador',
tokenUrl: 'refresh/token',
tokenName: 'token',
authType: 'bearer',
tokenHeader: 'Authorization',
tokenTimeoutOffset: 1 * 1000 // 5 minutes
})

to:

Vue.use(Auth, {
router: router,
http: Vue.http
})

login request

    params: this.form,
    rememberMe: true,
    redirect: '/',
    success (res) {
      // console.log(res.data.token)
    },
    error () {
      this.erroform = true
    }
  })```

thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<https://github.com/websanova/vue-auth/issues/37>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABkcy-7bvyaQ_-sxNLNRGR_GZm-F_qD7ks5q1KSUgaJpZM4KZpMo>
.

Robert Duchnik
http://www.duchnik.com

[nunob87]

    "vue": "^2.0.3"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-config-standard": "^6.1.0",
    "eslint-plugin-promise": "^2.0.1",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
    "lolex": "^1.4.0",
    "mocha": "^3.1.0",
    "chai": "^3.5.0",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "inject-loader": "^2.0.1",
    "isparta-loader": "^2.0.0",
    "phantomjs-prebuilt": "^2.1.3",
    "chromedriver": "^2.21.2",
    "cross-spawn": "^4.0.2",
    "nightwatch": "^0.9.8",
    "selenium-server": "2.53.1",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.4.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1",
    "vue-resource-2": "^0.8.0",
    "@websanova/vue-auth": "^1.1.1-beta",
    "vue-router": "^2.0.0",
    "vuex": "*",
    "vuex-router-sync": "^3.0.0"
  }´´´

[websanova]

You need to check the docs, there have been many updates to the options setup.

[nunob87]

update to
"vue-resource-2": "^1.0.3", "vue-i18n": "4.6.0", "@websanova/vue-auth": "^1.1.1-beta", "vuex": "2.0.0", "vue-router": "^2.0.1", "vuex-router-sync": "^2.1.1"

but remains the same

const router = new Router({ routes: [ { path: '/', component: Home, meta: {auth: true} }, { path: '/login', component: Login, meta: {auth: false} }, { path: '/registar', component: Register, meta: {auth: false} }, { path: '*', component: NotFound } ], mode: 'history', base: __dirname })

Is it right?? does not redirect to login???

[kubacode]

@nunob87 are there any errors in the console?

[websanova]

Hey, not sure if this may fix your issue, but try updating to the latest version 1.3.0-beta as it includes a few updates and potentially bug fixes for you.

[nunob87]

@kubacode e @websanova - I request login and give me these errors

vue-resource.common.js:305 [VueResource warn]: The `success` method has been deprecated. Use the `then` method instead.
vue-resource.common.js:305 [VueResource warn]: The `error` method has been deprecated. Use the `catch` method instead.
vue-resource.common.js:305 [VueResource warn]: The `success` method has been deprecated. Use the `then` method instead.
vue-resource.common.js:305 [VueResource warn]: The `error` method has been deprecated. Use the `catch` method instead.
vue-resource.common.js:311 TypeError: t.headers.set is not a function(…)a @ vue-resource.common.js:311(anonymous function) @ vue-resource.common.js:1152
vue-resource.common.js:305 [VueResource warn]: The `success` method has been deprecated. Use the `then` method instead.
vue-resource.common.js:305 [VueResource warn]: The `error` method has been deprecated. Use the `catch` method instead.
vue-resource.common.js:311 TypeError: t.headers.set is not a function(…)```

my versions

```"@websanova/vue-auth": "^1.3.0-beta",
    "vue-resource-2": "0.8.0",
    "vue-router": "2.0.1",
    "vuex-router-sync": "^2.1.1"```

[nunob87]

I can give remote access to my pc if you need

// main.js

import Vue from 'vue'
import I18n from 'vue-i18n'
import Auth from '@websanova/vue-auth'
import Resource from 'vue-resource-2'
// import store from './vuex/store'
// import { sync } from 'vuex-router-sync'
import App from './components/App.vue'
import router from './router'
import VueSweetAlert from 'vue-sweetalert'
import EN from './langs/en.json'
import PT from './langs/pt.json'

Vue.use(I18n)
Vue.use(Resource)
Vue.use(VueSweetAlert)
// sync(store, router)

Vue.http.options.root = 'http://' + window.location.hostname
// Vue.http.headers.common['Authorization'] = ''

Vue.use(Auth, {
  router: router,
  http: Vue.http,
  loginUrl: 'auth/login',
  fetchUrl: 'utilizador',
  tokenUrl: 'refresh/token',
  tokenName: 'token',
  authType: 'Bearer',
  tokenHeader: 'Authorization',
  tokenTimeoutOffset: 1 * 1000  // 5 minutes
})

Vue.locale('en', EN)
Vue.locale('pt', PT)
Vue.config.lang = 'pt'

export default new Vue(Vue.util.extend({ router }, App)).$mount('#app')```

---------------

// router.js

import Vue from 'vue'
import Router from 'vue-router'

// auth
import Login from './components/auth/Login.vue'
import Register from './components/auth/Register.vue'

import NotFound from './components/NotFound.vue'

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

Vue.use(Router)

const router = new Router({
routes: [
{ path: '/', component: Home, meta: {auth: true} },
{ path: '/login', component: Login, meta: {auth: false} },
{ path: '/registar', component: Register, meta: {auth: false} },
{ path: '*', component: NotFound }
],
mode: 'history',
base: __dirname
})

export default router````

---

// login.vue

<script>
  import { mapMutations } from 'vuex'
  import { foc, val } from '../../filters/index'

  export default {
    data () {
      return {
        form: {
          email: ,
          password: ''
        },
        pagina: 'login',
        erroform: false
      }
    },
    mounted () {
      foc('email')
    },
    methods: {
      ...mapMutations([
        'SET_LOAD'
      ]),
      submit () {
        if (val()) {
          this.erroform = false
          this.SET_LOAD(true)
          this.$auth.login({
            params: this.form,
            rememberMe: true,
            redirect: '/',
            success (res) {
              // this.$auth.useToken(res.body.data.token)
              // this.$router.go('/')
            },
            error () {
              this.SET_LOAD(false)
              this.erroform = true
            }
          })
        }
      }
    }
  }
</script>````

[websanova]

Doesn't seem like the router is being set property, maybe check the two
demo code samples in the plugin on GH ;)

On Oct 19, 2016 16:40, "Nuno" [email protected] wrote:

I can give remote access to my pc if you need

import Vue from 'vue'
import I18n from 'vue-i18n'
import Auth from '@websanova/vue-auth'
import Resource from 'vue-resource-2'
// import store from './vuex/store'
// import { sync } from 'vuex-router-sync'
import App from './components/App.vue'
import router from './router'
import VueSweetAlert from 'vue-sweetalert'
import EN from './langs/en.json'
import PT from './langs/pt.json'

Vue.use(I18n)
Vue.use(Resource)
Vue.use(VueSweetAlert)
// sync(store, router)

Vue.http.options.root = 'http://' + window.location.hostname
// Vue.http.headers.common['Authorization'] = ''

Vue.use(Auth, {
router: router,
http: Vue.http,
loginUrl: 'auth/login',
fetchUrl: 'utilizador',
tokenUrl: 'refresh/token',
tokenName: 'token',
authType: 'Bearer',
tokenHeader: 'Authorization',
tokenTimeoutOffset: 1 * 1000 // 5 minutes
})

Vue.locale('en', EN)
Vue.locale('pt', PT)
Vue.config.lang = 'pt'

export default new Vue(Vue.util.extend({ router }, App)).$mount('#app')```

---

import Vue from 'vue'
import Router from 'vue-router'

// auth
import Login from './components/auth/Login.vue'
import Register from './components/auth/Register.vue'

import NotFound from './components/NotFound.vue'

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

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', component: Home, meta: {auth: true} },
    { path: '/login', component: Login, meta: {auth: false} },
    { path: '/registar', component: Register, meta: {auth: false} },
    { path: '*', component: NotFound }
  ],
  mode: 'history',
  base: __dirname
})

export default router````

-----

```login.vue
<script>
  import { mapMutations } from 'vuex'
  import { foc, val } from '../../filters/index'

  export default {
    data () {
      return {
        form: {
          email: ,
          password: ''
        },
        pagina: 'login',
        erroform: false
      }
    },
    mounted () {
      foc('email')
    },
    methods: {
      ...mapMutations([
        'SET_LOAD'
      ]),
      submit () {
        if (val()) {
          this.erroform = false
          this.SET_LOAD(true)
          this.$auth.login({
            params: this.form,
            rememberMe: true,
            redirect: '/',
            success (res) {
              // this.$auth.useToken(res.body.data.token)
              // this.$router.go('/')
            },
            error () {
              this.SET_LOAD(false)
              this.erroform = true
            }
          })
        }
      }
    }
  }
</script>````

-------



—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<https://github.com/websanova/vue-auth/issues/37#issuecomment-254764354>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABkcy0uF_JQlgStif6JAoiUp_m0Dl0Z3ks5q1eWcgaJpZM4KZpMo>
.

[nunob87]

I created a simple project and has the same mistakes

http://dev.bill.pt (online demo)

code:
Arquivo.zip

if you have any example in which two working could send me to compare the code

[websanova]

Ya, I told you, there is demo already min the plugin code ;)

On Oct 19, 2016 22:21, "Nuno" [email protected] wrote:

I created a simple project and has the same mistakes

http://dev.bill.pt (online demo)

code:
Arquivo.zip
https://github.com/websanova/vue-auth/files/539431/Arquivo.zip

if you have any example in which two working could send me to compare the
code

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy1djOqGbQfWrnrfXRSeKl6QSSUozks5q1jVwgaJpZM4KZpMo
.

[nunob87]

thank you, already solved the problem be here "vue-resource-2"

[websanova]

ok, great :-)

On Thu, Oct 20, 2016 at 4:40 PM, Nuno [email protected] wrote:

thank you, already solved the problem be here "vue-resource-2"

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy_t5sEYCd6QQEaGWz5YV4-A5Q-VPks5q1zcFgaJpZM4KZpMo
.