This is the 7th day of my participation in Gwen Challenge

This article is participating in the “Java Theme Month – Java Development Practice”, for more details: activity link

The preface

A good framework, in addition to meet the needs of business development basic, more important is to consider the system scalability and performance problems, it is well known that the early stage of the development, because of the uncertainty of the business and the new requirements changes, the early stage of the design can’t put all the questions are thoughtful, so it is particularly important to system can be extended. However, for some business processing, it is also a problem that must be considered in the early stage of system design, such as unified exception handling, encapsulation of common return results, cross-domain, etc. This article mainly focuses on a bug I modified before, briefly introduces how to perform the front-end cache expiration jump to the login page.

The development process

Design idea: Add the mouse movement event to the app.vue page for global monitoring. After logging in to the system, if the page does not trigger the mouse movement event, then after reaching the set validity period, clear the cache information and jump to the login page. If the mouse movement event is triggered during the cache validity period, then the timer is reset and the 30-minute validity period is reset.

The specific implementation process is as follows:

1. Add the mouse movement event on the app.vue page with the following code:

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

2. Declare functions in methods of app.vue and implement specific business processes

mouseMoveEvent(){ let path = ['/login'] if(! Path.path (this.$route.path)) {// Clear session clearTimeout(this.timmer) after 30 minutes if not the login page; this.init(); {}}, init () enclosing timmer = setTimeout (() = > {/ / clear the session sessionStorage. RemoveItem (" sessionData "); sessionStorage.clear(); // Clear cache this.$cache.reset(); $router.push({path: "/login",}); }, 30 * 60 * 1000); // Set half an hour to clear session and enter the login page},Copy the code

Complete code:

<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: {// Then inject a dependency on the page that needs to be refreshed: inject: ['reload'], just call the method where it needs to be executed: this.reload(). Reload () {this.isRouterAlive = false; // This.isRouterAlive = false; this.$nextTick(() => { this.isRouterAlive = true; }); }, mouseMoveEvent(){ let path = ['/login'] if(! Path.path (this.$route.path)) {// Clear session clearTimeout(this.timmer) after 30 minutes if not the login page; this.init(); {}}, init () enclosing timmer = setTimeout (() = > {/ / clear the session sessionStorage. RemoveItem (" sessionData "); sessionStorage.clear(); // Clear cache this.$cache.reset(); $router.push({path: "/login",}); }, 30 * 60 * 1000); },}, components: {}, created: function () {this.$router.push('/')},}; </script>Copy the code

At the end

There may be many ways to achieve this demand, this article only represents personal views, because mainly do back-end development, contact with the front end of the time is short, the imperfect place welcome you to correct, in the coding of progress together on the road. In addition, there is another implementation method: the background uniformly performs login exception processing, declares exceptions through the @ExceptionHandler annotation, and returns the code value not logged to the front end, and then the front end decides whether to jump to the login page according to the value. This paper does not do specific implementation, and the background code is as follows:

/ / not login user @ ExceptionHandler (AuthorizationException. Class) public Map < String, Object > unlogin (it request, HttpServletResponse response){ return CommonResult.creatReturnObj(ErrorCode.NOTLOGIN); }Copy the code