vue-admin icon indicating copy to clipboard operation
vue-admin copied to clipboard

can't get the Login.vue running

Open dominikarnoldi opened this issue 8 years ago • 4 comments

Hi there, i'm trying to set up a user authentication with the Login.vue component under client/views/auth/. Therefore i have written a small backend server in go with a REST Api. The configuration for vue-auth is still the same i just changed the url where the request should go to. As i see the configuration from vue-auth and as i read from vue-auth with the command this.$auth.login(... there should be send a request with a Authorization field in the header and the Bearer token to the backend server right ? I get the request at the backend server but the Authorization field is missing ? So what i'm doing wrong here ? Thank you for your help :-) VueAuth configuration:

Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
    },
    response: function (res) {
      // Get Token from response body
      return res.data
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  // http: require('@websanova/vue-auth/drivers/http/vue-resource.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: { url: 'http://localhost:5000/token-auth', fetchUser: false },
  refreshData: { enabled: false }
})

Login.vue

  methods: {
    login () {
      var redirect = this.$auth.redirect()
      this.$auth.login({
        headers: {
          'Content-Type': 'application/json'
        },
        data: this.data.body,
        rememberMe: this.data.rememberMe,
        redirect: {name: redirect ? redirect.from.name : 'Home'},
        success (res) {
          console.log('Auth Success')
          // console.log('Token: ' + this.$auth.token())
          // console.log(res)
        },
        error (err) {
          if (err.response) {
            // The request was made, but the server responded with a status code
            // that falls out of the range of 2xx
            // console.log(err.response.status)
            // console.log(err.response.data)
            // console.log(err.response.headers)
            this.error = err.response.data
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', err.message)
          }
          console.log(err.config)
        }
      })
    }
  }

dominikarnoldi avatar Oct 05 '17 09:10 dominikarnoldi

did you solved that?

I am running into the same problems :/

netzfluencer avatar Feb 08 '18 13:02 netzfluencer

Hi Marvinworks,

didn't keep on searching because in the last month i was short on time for my little project. But it looks like i have some time in the next weeks to make some progress on that.

dominikarnoldi avatar Feb 10 '18 10:02 dominikarnoldi

@nanoupper okay cool, thank you!

netzfluencer avatar Feb 14 '18 09:02 netzfluencer

It was a backend CORS Problem.

With the package 'cors' it works. The commented part is what I had before ...

// app.use(function(req, res, next) {
//   res.header('Access-Control-Allow-Origin', '*');
//   res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
//   res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
//   next()
// });
app.use(cors());

netzfluencer avatar Feb 15 '18 10:02 netzfluencer