Vue.js & Vuex - 在商店中存储访问令牌并将用户重定向到 URL 进行登录

Question

我正在尝试将访问令牌存储到 createStore (index.js) 中，然后在用户登录后将其重定向到另一个网页。

为此，我需要在 mutations.js 中创建一个突变，以便我可以设置访问令牌并设置刷新令牌。刷新应该像一个时间戳。

test.vue 是登录代码用来验证用户的地方。

所以，基本上我需要创建一个函数，设置访问令牌，设置刷新令牌，然后在用户按下登录按钮后将用户重定向到另一个网页。

非常感谢！

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>

Answer 1

我认为这个问题有两种可能的解决方案。

首先：您可以使用vue-router。在这种情况下，将没有页面刷新，只是组件更改。那样直到你刷新页面，每个 vuex 状态都将存在。（但这不是最好的解决方案）。
第二；你可以写一个休息电话，什么是给你实际的用户令牌，如果用户通过身份验证。所以只有这个 rest api call use 会话身份验证和/或 CSRF 令牌（如果您选择 wiki 不知道）。如果您使用 axios，这是最优雅的方式之一 interceptor (运行 before every axios call), what will get the token if 用户已通过身份验证。检查这个 github comment 进一步信息。（确保会话超时时间比令牌长一生 :) )

Vue.js & Vuex - 在商店中存储访问令牌并将用户重定向到 URL 进行登录

Vue.js & Vuex - Store access token in store and redirect user to an URL for login

javascript

vue.js

timestamp

vuex

mutation