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

我试图将访问令牌存储到createStore（index.js）中，然后在用户登录后重定向到另一个网页

为此，我需要在translations.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;

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>

电子邮件丢失或不正确。请再试一次！


无效电子邮件！


密码丢失或不正确。请再试一次！


登录详细信息不正确！

登录
从“axios”导入axios；
导出默认值{
数据（）{
返回{
电子邮件：“test@gmail.com",
密码：“123456”，
国旗：错，
错：{
电子邮件：false，
电子邮件格式：false，
密码：false，
全部：错
},
}
},
方法：{
登录：函数（索引）{
this.error.email=false；
this.error.password=false；
this.error.all=false；
this.Error.emailFormat=false；
轴心柱(`https://api.ticket.co/auth/login`, {
电子邮件：this.email，
密码：这个是密码
})
。然后（响应=>{
//JSON响应会自动解析。
console.log（response.data）
console.log（response.status）
})
.catch（e=>{
控制台日志（e）
console.log（例如response.status）
var vueObject=此
开关（如响应状态）{
案例400：
如果（！vueObject.email）{
控制台日志（1）
this.error.email=true；
}如果（！vueObject.emailFormat）为else，则为{
控制台日志（2）
this.Error.emailFormat=true；
};
如果（！vueObject.password）{
控制台日志（3）
this.error.password=true；
}
打破
案例401：
控制台日志（4）
this.error.all=true；
打破
}
})
},
},
}

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

• 第一：你可以使用。在这种情况下，就不会有 页面刷新，只是组件更改。这样直到你恢复精神 在页面中，每个vuex状态都将有效。（但这不是最好的 解决方案）
• 第二；你可以写一个rest调用，什么是实际返回给你的 用户令牌，如果用户已通过身份验证。所以只有这个RESTAPI调用使用 会话身份验证和/或CSRF令牌（检查您是否 不知道）。如果您使用axios，这是最优雅的方式之一 拦截器（在每次axios调用之前运行），如果 用户已通过身份验证。检查这个以了解更多信息 信息。（请确保会话超时时间长于令牌 寿命：））

---

您能不能给我一些建议，告诉我如何才能真正做到这一点，因为我被卡住了。非常感谢您的回答，因为它提供了一些更好的见解，并提前表示感谢！不客气！您应该定义axios拦截器，在这里创建axios（在bootstrap.js中）。请注意，在axios内使用相同的axios。它导致无限循环。我建议您在主axios中使用另一个axios对象，或者在拦截器中使用本机js ajax调用。如果您不让我更清楚一点，我对vuejs、vuex和axios是新手。所以，我真的需要帮助。另外，我没有bootstrap.js。再次感谢！如果你是新手，我建议你在youtube上观看一些关于vuejs的教程！好啊但是，您能告诉我如何编写rest调用以及如何在我正在使用的代码中使用axios拦截器的基本知识吗。非常感谢！