How to empty localstorage before closing a page

One 、 Preface

In practice Vue In the project, we want to do persistence , Will use vuex coordination localstorage、cookie、 And so on , There will be no data loss on the refresh page ;localstorage The feature is that the life cycle is permanent unless you manually clear , This can lead to a problem , For example, you want to clear the local storage content when closing the page , We need to deal with it , The following will combine vue The problems encountered in the project provide solutions ;

Two 、 Problem description

stay vue In order to do access permission in the project , You need to inject token, On the contrary, when you log out , The locally stored token, But if you use locastorage When storing data, a bug, That is, when you do not exit the page through the exit button , Instead, clicking the close button directly to close the page will cause a problem ： Locally stored token The value still exists ; At this point, if you do route authentication in the route front guard, it will lead to the next page , The front guard of the route found that there were still token It will jump directly to the welcome interface . For this problem, let me provide you with a solution ;

3、 ... and 、 terms of settlement

The key to solving the above problem is obviously how to listen for the event of closing the page , Just close the page and clear the locally stored token;
All we need to do is App Component's mounted Inside the hook window Bind one beforeunload event , Clear in the callback function token, As shown in the figure below ;

The code example is as follows ：

mounted () {
    
    //  Empty the browser cache when closing the browser window localStorage The data of 
    window.onbeforeunload = function (e) {
    
      const storage = window.localStorage
      storage.clear()
    }
  }

At the end

(*´◡`*) Your give the thumbs-up Comment on Collection Is the greatest driving force of the author's creation