0

Flask API for email token validation:

@app.route("/api/v1.0/verify", methods=["GET"])
def confirm_email():
    token = request.args.get('token')
    new_url = 'http://futurex-google-cloud-lab-2.futurex.com.ph:8080'
    register = 'register'
    email_verify = 'verify_email'
    try:
        email = s.loads(token, salt="email-confirm", max_age=300)
        # return {"message": "The token works!"}, 200
        return redirect('{new_url}/{page}'.format(new_url=new_url, page=register), 302)
    except SignatureExpired:
        # return {"message": "The token is expired"}, 403
        return redirect('{new_url}/{page}'.format(new_url=new_url, page=email_verify), 403)

My vue route:

{
        path: "/register",
        component: Register,
        beforeEnter (to, from, next){
            const email_token = window.localStorage.getItem('email_token')
            console.log(email_token)

            if(email_token === '' || email_token === null){
                next('/verify_email')
            }else {
                axios.get('http://futurex-google-cloud-lab-2.futurex.com.ph:5000/api/v1.0/verify?token=' + email_token)
                    .then(res => {
                        console.log(res)
                    })
                    .catch(err => {
                        console.log(err)
                        next('/verify_email')
                    })
            } 
        }
    }

And got error when accessing the route:

Access to XMLHttpRequest at 'http://futurex-google-cloud-lab-2.futurex.com.ph:8080/register' (redirected from 'http://futurex-google-cloud-lab-2.futurex.com.ph:5000/api/v1.0/verify?token=Im5pc3BpYm9wc3VAZW5heXUuY29tIg.XnxCBw.2B47QLF-JBJ5_p16R5m2e6PuEK8') from origin 'http://futurex-google-cloud-lab-2.futurex.com.ph:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
routes.js?7aab:49 Error: Network Error
    at createError (createError.js?16d0:16)
    at XMLHttpRequest.handleError (xhr.js?ec6c:83)
register:1 Failed to load resource: net::ERR_FAILED

My goal is to prevent the user to access the vue route unless the token is valid if i make any sense. I've tried everything but don't know how to fix this. By the way I'm new to flask and vuejs so your help will do. Thanks.

Paul Exconde
  • 51
  • 1
  • 4

1 Answers1

0

Move between different Vue routes on your client, not your server. So just move the redirect logic to within your Vue method:

methods {
  login: function () {
      axios.post('login', { email:this.email, password:this.password })
        .then( user => {
            this.$store.commit('set_user',user) // for authorisation
            this.$router.push('/account')
         })
        .catch( err => this.message = err )
    },
}

If you are redirecting to authorised access only pages you will need to add an authorisation guard to your vue routes on your vue router - see:

Accessing Vuex state when defining Vue-Router routes

ellisdod
  • 1,644
  • 10
  • 11