1. 程式人生 > >vue頁面無操作10分鐘內調轉到登入頁面

vue頁面無操作10分鐘內調轉到登入頁面

思路:

頁面在設定時間內無任何操作(滑鼠的點選、滑動、路由的切換、是否請求介面等),跳轉到登入頁,在跳轉前把url存起來,點選登入的時候用。

下面介紹其中的一種方法,滑鼠的滑動時間:(用到base64加密)

<template>
  <div id="app" @mouseover="OperatingWebsite()">
    <router-view/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentTime: new Date().getTime() 
    };
  },
  methods: {
    OperatingWebsite() {
      let currentTime = this.currentTime;
      console.log(currentTime, "currentTime");
      let lastTime = new Date().getTime();
      console.log(lastTime, "lastTime");
      let timeOut = 10 * 60 * 1000; //設定時間 10分鐘
      if (lastTime - currentTime > timeOut) {
        // 未操作頁面,跳轉登入頁面
        this.currentTime = new Date().getTime(); 
        const fullPath = this.$route.fullPath;
        const query = this.$Base64.encode(fullPath);
        this.$router.push({
          path: "/user",
          query: {
            type: query
          }
        });
      } else {
        this.currentTime = new Date().getTime(); 
      }

      // const truthPathQuery = this.$route.query.type;
      // const truthPath = this.$Base64.decode(truthPathQuery); //點選登入的時候跳轉這個地址
    }
  }
};