Как сделать редирект VueJS & Flask?

Question

[Ложка в мозге]

Добрый день, хочу сделать редирект на определённую страницу после авторизации вот код:
VueJS:

<template>
	<div class="container">
		<form>
			<input type="text" name="login" v-model="login" placeholder="login">
			<input type="text" name="pass" v-model="pass" placeholder="pass">
			<button @click="loginSubmit">Submit</button>
		</form>
	</div>
</template>

<script>
var Axios = require('axios')

export default{
	data: function(){
		return{
			login: '',
			pass: ''
		}
	},
	methods: {
		loginSubmit: function(e){
			e.preventDefault()
			Axios.post('http://192.168.1.102:5000/authorization', {login: this.login, pass: this.pass})
			.then(response => { })
		}
	}
}
</script>

Flask

@app.route('/authorization', methods = ['GET', 'POST'])
def authorization():
	if request.method == 'POST':
		user = request.get_json()
		dump = json.dumps(user)
		data = json.loads(dump)
		if data['login'] == 'admin':
			#Тут я не совсем понимаю что писать,
                        #что передавать в VueJS чтобы произошёл редирект?
	return render_template('index.html')

Так вот, как производятся редиректы в VueJS, с бекэндом FLask?

Answer 1

[Sashqa]

Может это вам поможет
Хотя наверно лучше это

Answer 2

[planc]

тебе не редирект нужен, а понять как работает фронт с бэком

упрощенно:
у тебя на бэке есть таблица с user_id, username, passwd, token
фронт отправляет имя + пароль
бэк смотрит если все ОК, то генерирует token и отдает его фронту, предварительно запихав в базу

все теперь у тебя есть валидный токен на фронте и каждый запрос ты добавляешь header
Authorization: Bearer тут_токен
бэк смотрит этот хедер и если он валидный, то это запрос от user_id

https://flask-login.readthedocs.io/en/latest/#cust...

как производятся редиректы в VueJS

если мне отдали токен, то router.push('мой редирект')

Answer 3

[domanskiy]

У самого сейчас проект учебный RestAPI на Flask + Vue

Тебе нужно в ретурне отдавать JSON и код 200 если всё ОК
В JSON пихнуть токен, юзернаме, роль юзера, и т.д.

Токен, используя Vuex запихнуть в стайт и использовать в запросах
Я использую Vuex. Советую

Про редирект.

<script>
    import {mapGetters, mapActions} from 'vuex'

    export default {
        name: 'login',
        data() {
            return {
                form: {
                    email: null,
                    password: null,
                }
            }
        },
        // computed: mapGetters(['user/USER_AUTH']),
        methods: {
            ...mapActions({
                loginUser: 'user/LOGIN_USER'
            }),
            submit() {
                this.loginUser(this.form)
                    .then(() => this.$router.push('/'))
                    .catch(err => console.log(err))
            }
        }
    }
</script>

Т.е. метод отправляет в экшен данные формы.
Экшен Vuex отправляет данные на сервер через API, и т.д.

actions: {
        async LOGIN_USER({ commit }, form) {
            const response = await axios.post('api/v1/login', form)

            const user = await response.data
            commit('UPDATE_USER_AUTH', user)
        },

Может не самый оптимальный код. Но пока так. Рефакторинг потом устрою.
Запись в локалсторе, что бы не терять данные при перезагрузке страницы.
Мутация:

mutations: {
        UPDATE_USER_AUTH(state, user) {
            localStorage.token = user.token
            localStorage.email = user.email
            localStorage.name = user.name
            localStorage.role = user.role
            state.token = user.token
            state.email = user.email
            state.name = user.name
            state.role = user.role
        }