Handle callback urls in Vue router

Question

I use Stamplay as BaaS, so to authenticate user, I just redirect to

/auth/v1/auth0/connect

After, user authenticate.. the Stamplay call my app with

/login/callback?jwt=abc.123.xyz

How can I authenticate user after Stamplay call my app?

Tried

I my router config I try..

'/login/callback': {
  component: Vue.extend({
    ready() {
      // ...  THIS IS NOT CALLED!! NEVER
      console.log('... ready .. ')
      console.log(this.$route.query.jwt)
    }
  })
}

If its about getting the query params please refer this: http://router.vuejs.org/en/route.html and also see how to implement authentication usually in vue.js. This is a good article here: https://auth0.com/blog/build-an-app-with-vuejs/. Now in your case your login component can always use the value it receives in the query-params and store in the local-storage and set the authentication flag in your app. — Deepak, Sep 08 '16 at 04:38
HI @Deepak, this article use [lock](https://auth0.com/lock) form, in my case, i call externall url that authenticate user and call my with with `/login/callback?jwt=xyz` — ridermansb, Oct 03 '16 at 20:46
So, when call my Vue app (using URL `/login/callback?jwt=xyz`) I need to execute my code... to capture query string and set authentication — ridermansb, Oct 03 '16 at 20:48

score 1 · Accepted Answer · answered Sep 09 '16 at 08:50

1

Try to access this.$route.query.jwt from within the component.

answered Sep 09 '16 at 08:50

kartsims

1,001
9
16

Yes, where else ? :) Could you provide a JSFiddle ? You can access it in your component, on `ready` event for instance – kartsims Sep 09 '16 at 13:02
As stated in the comment by @Deepak , check http://router.vuejs.org/en/route.html . It states "The route object will be injected into every component in a vue-router-enabled app as this.$route" and `this.$route.query.jwt` should contain the value of the jwt you get back from Stamplay – kartsims Sep 09 '16 at 13:04
Hi @kartsims, sorry for delay. Yep. `this.$router` is injected into every component. But, how capture in router? Se my edited question. – ridermansb Oct 03 '16 at 20:42
OK but a fiddle would _really_ help me help you here – kartsims Oct 04 '16 at 07:19
I create a github repo.. https://github.com/Ridermansb/vuex-router-auth0-example – ridermansb Oct 14 '16 at 20:54

score 0 · Answer 2 · answered Oct 06 '16 at 09:09

0

Hi I think you will have a view component for /login/callback in your router config. what you need is when this component is activated, trigger some function right?

So in above view component, where you have data, methods, you can try to do this:

//your component
'/login/callback': {
  component: Vue.extend({
  data(){
    return {
    }
  },
  methods: {},
  route: {
    activate(){
      console.log('... ready .. ')
    }
  }
}

answered Oct 06 '16 at 09:09

Sabrina Luo

3,810
4
16
35

follow the error. `vue.common.js?e881:2611 [Vue warn]: Failed to mount component: template or render function not defined. ` – ridermansb Oct 14 '16 at 20:52

Handle callback urls in Vue router

Tried

2 Answers2