vue框架缓存过期业务处理

2024-03-22 16:32:04

序言

一个好的框架，除了满足业务开发的需求基本之外，更重要的是要考虑系统的可扩展性和性能问题，众所周知，开发前期，由于业务的不确定性以及新需求的变更，设计前期无法将所有问题都考虑周到，所以系统的可扩展显得尤为重要。但是，对于一些通过业务的处理，也是一个系统设计初期必须考虑的问题，比如统一异常处理、封装公共返回结果、跨域等，本文主要针对之前本人修改的一个bug，简要介绍下前端如何进行缓存过期跳到登录页面的问题。

开发流程

设计思路：在app.vue页面添加鼠标移动事件，进行全局监听，登录系统后，如果页面没有触发鼠标移动事件，那么到达设置的有效期之后，清空缓存信息，跳转到登录页面；如果在缓存有效期内触发鼠标移动事件，那么重新计时，重新设置30分钟的有效期。

具体实现流程如下：

在app.vue页面添加鼠标移动事件，代码如下：

<template>
  <div id="app" @mousemove="mouseMoveEvent" @click="mouseMoveEvent">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

2.在app.vue的methods方法中声明函数，并实现具体的业务流程

mouseMoveEvent(){
      let path = ['/login']
      if(!path.includes(this.$route.path)) { //如果不是登录页面的话,页面停止操作30分钟后清空session
        clearTimeout(this.timmer);
        this.init();
      }
    },
    init(){
      this.timmer=setTimeout(()=>{
        //清除session
        sessionStorage.removeItem("sessionData");
        sessionStorage.clear();
        //清除缓存
        this.$cache.reset();
        //跳往登录页面
        this.$router.push({
          path: "/login",
      });
      },30*60*1000);//设置半小时清空session进入登录页
    },

完整代码：

<template>
  <div id="app" @mousemove="mouseMoveEvent" @click="mouseMoveEvent">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isRouterAlive: true,      
      timmer: null,
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    //然后在需要刷新的页面引入依赖：inject: ['reload'], 在需要执行的地方直接调用方法即可：this.reload()。
    // 在单独页面监听，刷新时调用this.reload()，路由不换，页面内容空白
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },

    mouseMoveEvent(){
      let path = ['/login']
      if(!path.includes(this.$route.path)) { //如果不是登录页面的话,页面停止操作30分钟后清空session
        clearTimeout(this.timmer);
        this.init();
      }
    },
    init(){
      this.timmer=setTimeout(()=>{
        //清除session
        sessionStorage.removeItem("sessionData");
        sessionStorage.clear();
        //清除缓存
        this.$cache.reset();
        //跳往登录页面
        this.$router.push({
          path: "/login",
      });
      },30*60*1000);//设置半小时清空session进入登录页
    },


  },
  components: {},
  created: function () {
    // 页面刷新时回到首页，页面有等待的空白
    this.$router.push('/')
  },
};
</script>

结尾
此需求的实现方式可能有很多种，本文只代表个人观点，由于主要做后端开发，接触前端时间较短，文中不完善的地方欢迎大家指正，在编码的道路上一起进步。此外还有另一种实现方式：后台统一做登录异常处理，通过@ExceptionHandler注解声明异常，并将未登录code值返回给前端，然后由前端根据该值做判断是否跳到登录页面,本文不再做具体实现，后台代码如下：

//未登录用户	
@ExceptionHandler(AuthorizationException.class)
public Map<String, Object> unlogin(HttpServletRequest request, HttpServletResponse response){
        return CommonResult.creatReturnObj(ErrorCode.NOTLOGIN);
}

码农公寓

相关文章