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

Question

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

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

test.vue 是登录代码用于验证用户的位置。

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

提前非常感谢!

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;

测试.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: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88fcedfbfcc8efe5e9e1e4a6ebe7e5" rel="noreferrer noopener nofollow">[email protected]</a>",
            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 状态都会存在。 (但这不是最好的 解决方案)。
• 第二；你可以写一个休息电话，什么是给你实际的 用户 token (如果用户已通过身份验证)。所以只有这个rest api调用使用 session 身份验证和/或 CSRF token (如果您 不知道)。如果您使用 axios，这是最优雅的方式之一 拦截器(在每次 axios 调用之前运行)，如果 用户已通过身份验证。检查这个wiki为了进一步 信息。 (确保 session 超时时间比 token 超时时间长) 一生:))