Ошибка, когда я пытаюсь подтвердить электронную почту с flask и затем перенаправить на vue маршрут, я что-то пропустил или какой подход я могу использовать?

Question

Flask API для проверки токена электронной почты:

@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)

Мой vue маршрут:

{
        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')
                    })
            } 
        }
    }

И получил ошибку при доступе к маршруту:

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

Моя цель состоит в том, чтобы запретить пользователю доступ к маршруту vue, если токен не действителен, если у меня есть смысл. Я перепробовал все, но не знаю, как это исправить. Кстати, я новичок в flask и vuejs, так что ваша помощь подойдет. Спасибо.

Answer 1

Перемещение между различными Vue маршрутами на вашем клиенте, а не на вашем сервере. Поэтому просто переместите логи перенаправления c в свой метод Vue:

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 )
    },
}

Если вы перенаправляете на страницы только с авторизованным доступом, вам нужно будет добавить защиту авторизации к вашим vue маршрутам на ваш vue маршрутизатор - см .:

Доступ к состоянию Vuex при определении Vue -Router маршрутов