Vue.js & Vuex - хранить токен доступа в магазине и перенаправлять пользователя на URL для входа - PullRequest
Новая
       59

Vue.js & Vuex - хранить токен доступа в магазине и перенаправлять пользователя на URL для входа

0 голосов
/ 30 мая 2018

Я пытаюсь сохранить токен доступа в createStore (index.js), а затем перенаправить пользователя для перехода на другую веб-страницу после входа в систему.

Для этого мне нужно создать мутацию в mutations.js, чтобы я мог установить токен доступа и установить токен обновления.Обновление должно быть похоже на отметку времени.

В файле test.vue для подтверждения пользователя используется код входа в систему.

Итак, в основном мне нужно создать функцию, установить токен доступа, установить токен refrefresh и затем перенаправить пользователя на другую веб-страницу после нажатия кнопки входа в систему.

Большое спасибо заранее!

index.js: 

import vuex from 'vuex';
import mutations from './mutations';

const createStore = () =>{
    return new vuex.Store({
        state: {
            accessToken: "halo",
            access_token: response.data.access_token,
            refresh: response.data.refresh_token
        },
        getters:{
            accessToken(state, getters){
                return state.accessToken;
            }
        },
        mutations
    });
};

export default createStore;

mutations.js: 

const mutations = {
    setToken(state, token) {
      state.accessToken = token;
    }
  }

  export default mutations;

test.vue: 

<template>
    <form>
        <div class="login">
            <div>
                <input name="email" type="text" v-model="email" v-validate="'required'" placeholder="Email" class="eSection" id="email">
                <p v-show="wrong.email">
                    Email is missing or incorrect. Please try again!
                </p>

                <i name="emailFormat" type="text" v-validate="'required|emailFormat'" placeholder="Email" class="eSection" id="email"></i>
                <p v-show="wrong.emailFormat">
                    Not valid email!
                </p>

                <input name="password" type="password" v-model="password" v-validate="'required'" placeholder="Password" class="pSection"
                    id="password">
                <p v-show="wrong.password">
                    Password is missing or incorrect. Please try again!
                </p>

                <p v-show="wrong.all">
                    Login Details Incorrect!
                </p>

                <button type="button" class="log" @click="login">LogIn</button>
            </div>
        </div>
    </form>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            email: "test@gmail.com",
            password: "123456",
            flag: false,
            wrong: {
                email: false,
                emailFormat: false,
                password: false,
                all: false
            },
        }
    },

    methods: {
        login: function (index) {

            this.wrong.email = false;
            this.wrong.password = false;
            this.wrong.all = false;
            this.wrong.emailFormat = false;

            axios.post(`https://api.ticket.co/auth/login`, {
                    email: this.email,
                    password: this.password
                })

                .then(response => {
                    // JSON responses are automatically parsed.
                    console.log(response.data)
                    console.log(response.status)
                })

                .catch(e => {
                    console.log(e)
                    console.log(e.response.status)

                    var vueObject = this

                    switch (e.response.status) {
                        case 400:
                            if (!vueObject.email) {
                                console.log(1)
                                this.wrong.email = true;
                            } else if (!vueObject.emailFormat) {
                                console.log(2)
                                this.wrong.emailFormat = true;
                            };

                            if (!vueObject.password) {
                                console.log(3)
                                this.wrong.password = true;
                            }
                            break;

                        case 401:
                            console.log(4)
                            this.wrong.all = true;
                            break;
                    }
                })
        },
    },
}
</script>

1 Ответ

0 голосов
/ 31 мая 2018

Я думаю, что есть два возможных решения этой проблемы.

  • Первое: вы можете использовать vue-router .В этом случае обновление страницы не будет, только изменение компонента .Таким образом, пока вы не обновите страницу, каждое состояние Vuex будет жить.(Но это не лучшее решение).
  • Второе;Вы можете написать остальной вызов, который вернет вам текущий токен пользователя, если пользователь прошел аутентификацию.Так что только этот оставшийся вызов API Api использует аутентификацию сеанса и / или токен CSRF (отметьте wiki , если вы этого не знаете).Один из самых элегантных способов, если вы используете axios interceptor (запускается перед каждым вызовом axios), что получит токен, если пользователь аутентифицирован.Проверьте это GitHub комментарий для получения дополнительной информации.(Убедитесь, что время ожидания сеанса больше, чем время жизни токена :))
...