第17章 前端之全局存储:Vuex=Store

17章 前端之全局存储:Vuex=Store

    Store用于对数据进行存储,并共享以为所有需要的Vue页面中的调用提供数据及其方法支撑;Vuex是Store的内置引用包,即如果想要前端Vue程序支撑Store必须在新建Vue程序;如果Vue程序没有引用Vuex包则,在Vue程序引用Vuex包。

1 定义src\store\index.js

import {

    createStore

} from 'vuex'

export default createStore({

    state: {

        token: null,//实例化“TokenJwt”字符串。

        tokenExpire: null,//实例化“TokenJwt”字符串的过期时间。

    },

    getters: {},

    mutations: {

        //通过该方法把“TokenJwt”字符串,进行全局存储。

        saveToken: function(state, data) {

            state.token = data;

            window.localStorage.setItem("Token", data);

        },

        //通过该方法把“TokenJwt”字符串的过期时间,进行全局存储。

        saveTokenExpire: function(state, data) {

            state.tokenExpire = data;

            window.localStorage.setItem("TokenExpire", data);

        },

    },

    actions: {},

    modules: {}

})

2 重构 src\api\api.js中的守卫拦截

 else if (error.response) {

            if (error.response.status == 401) {

                var curTime = new Date()

                var refreshtime = new Date(Date.parse(window.localStorage.refreshtime))

                // 在用户操作的活跃期内

                if (window.localStorage.refreshtime && (curTime <= refreshtime)) {

                    return  refreshToken({token: window.localStorage.Token}).then((res) => {

                        if (res.success) {

                            createApp.prototype.$message({

                                message: '成功获取“TokenJwt”字符串,数据载入中...',

                                type: 'success'

                            });

                             //“TokenJwt”字符串,进行全局存储。

                            this.$store.commit("saveToken", res.response.token);

                             //“TokenJwt”字符串的过期时间,进行全局存储。

                            let curTime = new Date();

                            let expiredate = new Date(curTime.setSeconds(curTime.getSeconds() + res.response.expires_in));

                            this.$store.commit("saveTokenExpire", expiredate);

                            error.config.__isRetryRequest = true;

                            error.config.headers.Authorization = 'Bearer ' + res.response.token;

                            return axios(error.config);

                        } else {

                            // 刷新token失败 清除token信息并跳转到登录页面

                            //ToLogin()

                        }

                    });

                } else {

                    // 返回 401,并且不知用户操作活跃期内 清除token信息并跳转到登录页面

                    //ToLogin()

                }

            }

3 重构src\views\LoginView.vue

  async submitLogin() {

                this.$refs.refRuleLogin.validate(async (valid) => {

                    if (valid) {

                        this.logining = true;

                        this.loginStr = "登录中...";

                        let loginParams = {

                            name: this.formLogin.account,

                            pass: this.formLogin.checkPass

                        };

                        let res = await requestLogin(loginParams);

                        //console.log(res);

                        if (res.status == 200) {

                            //“TokenJwt”字符串,进行全局存储。

                            console.log(this.$store.state.token);

                             let token = res.response.token;

                             this.$store.commit("saveToken", token);

                            console.log(this.$store.state.token);

                           

                            //“TokenJwt”字符串的过期时间,进行全局存储。

                            console.log(this.$store.state.tokenExpire);

                            let curTime = new Date();

                            let expiredate = new Date(curTime.setSeconds(curTime.getSeconds() + res.response.expires_in));

                            this.$store.commit("saveTokenExpire", expiredate);

                            console.log(this.$store.state.tokenExpire);

                             

                            this.$message.success("成功登录");

                            //通过定时器,3秒钟后跳转。

                            await setInterval(

                                async () => {

                                    await this.$router.replace(this.$route.query.redirect ? this

                                        .$route.query.redirect : "/");

                                }, 3000);

                               

                        } else {

                            this.$message.error(res.msg);

                            this.logining = false;

                            this.loginStr = "重新登录";

                        }

                    } else {

                        console.log('输入不能通过验证 !');

                        return false;

                    }

                });

            },

4 重构src\views\ LoginCompositionView.vue

   

<script setup>

    import {

        ref,

        reactive,

        getCurrentInstance

    } from "vue";

    import { useStore } from "vuex";

    import {

        requestLogin

    } from "../api/api.js";

    const formLogin = reactive({

        account: 'test',

        checkPass: 'test',

    });

    const ruleLogin = reactive({

        account: [{

            required: true,

            message: '请输入账号',

            trigger: 'blur'

        }, ],

        checkPass: [{

            required: true,

            message: '请输入密码',

            trigger: 'blur'

        }, ],

    });

    const checked = ref(true);

    const loginStr = ref('登录');

    const logining = ref(false);

    //实例化表单“ref”属性所对应的值。

    const refRuleLogin = ref('');

    const {

        $router,

        $route,

        $message

    } = getCurrentInstance().root.ctx.$root;

    //注意:由于“store”需要“retrun{}出去,所以必须在提交事件之外进行实例化。否则会出现异常。

    const store = useStore();

   

    //表单单击提交事件。

    const submitLogin = (formEl) => {

     

        if (!formEl) return;

        formEl.validate(async (valid) => {

            if (valid) {

                logining.value = true;

                loginStr.value = "登录中...";

                let loginParams = {

                    name: formLogin.account,

                    pass: formLogin.checkPass

                };

                let res = await requestLogin(loginParams);

                //console.log(res);

                if (res.status == 200) {

                    //“TokenJwt”字符串,进行全局存储。

                    console.log(store.state.token);

                     let token = res.response.token;

                     store.commit("saveToken", token);

                    console.log(store.state.token);

                   

                    //“TokenJwt”字符串的过期时间,进行全局存储。

                    console.log(store.state.tokenExpire);

                    let curTime = new Date();

                    let expiredate = new Date(curTime.setSeconds(curTime.getSeconds() + res.response.expires_in));

                    store.commit("saveTokenExpire", expiredate);

                    console.log(store.state.tokenExpire);

                   

                    $message.success("成功登录");

                    //通过定时器,3秒钟后跳转。

                    await setInterval(

                        async () => {

                            $router.replace($route.query.redirect ? $route.query.redirect : "/WelcomeComposition");

                        }, 3000);

                }

                else {

                    $message.error(res.msg);

                    logining.value = false;

                    loginStr.value = "重新登录";

                }

            } else {

                console.log('输入不能通过验证 !');

                return false;

            }

        });

    }

</script>

5 重构src\views\WelcomeView.vue

<template>

    <h1>Welcome</h1>

</template>

<script>

    export default {

        data() {

            return {};

        },

        methods: {

        },

        mounted() {

            /* console.log(this.$store.state.tokenExpire);

            this.$store.commit("saveTokenExpire", null);

            console.log(this.$store.state.tokenExpire); */

           

            var curTime = new Date();

            if (this.$store.state.tokenExpire) {

                var expiretime = new Date(Date.parse(this.$store.state.tokenExpire));

                if (curTime >= expiretime) {

                    this.$router.push("/login");

                }

            } else {

                this.$router.push("/login");

            }

        },

    }

</script>

6 定义src\views\WelcomeCompositionView.vue

<template>

    <h1>WelcomeComposition</h1>

</template>

<script setup>

    import {

        getCurrentInstance

    } from "vue";

    import { useStore } from "vuex";

    //注意:由于“store”需要“retrun{}出去,所以必须在提交事件之外进行实例化。否则会出现异常。

    const store = useStore();

    /* console.log(store.state.tokenExpire);

    store.commit("saveTokenExpire", null);

    console.log(store.state.tokenExpire); */

        const {

        $router,

    } = getCurrentInstance().root.ctx.$root;

    var curTime = new Date();

    if (store.state.tokenExpire) {

        var expiretime = new Date(Date.parse(store.state.tokenExpire));

        if (curTime >= expiretime) {

            $router.push("/LoginComposition");

        }

    } else {

        $router.push("/LoginComposition");

    }

</script>

 对以上功能更为具体实现和注释见:221217_003_admin(前端之全局存储:Vuex=Store)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值