vueウィンドウが閉じるかリフレッシュするかを判断する

1341 ワード

現在のプロジェクト要件:
1.同じブラウザで1つのアカウントしかログインできない
2.このブラウザの下でこのアカウントを複数のウィンドウで操作できる
3.ブラウザウィンドウが更新されたときは何もしません.ブラウザを閉じた場合は、ログイン情報を空にします.
 
1:
まずログイン情報をローカルにキャッシュし、localStorageで
sessionStorageを使用しないでください.sessionStorageでキャッシュされたデータは、ブラウザのアドレスバーでアドレスを入力して新しいウィンドウを開くと新しいウィンドウが開きます.
現在のウィンドウでリンクをクリックしてジャンプしない限り、共有されません.
localStorageはローカルに存在し、どのウィンドウを開いてもログイン情報というデータを共有します.
このステップは、上記の1、2の2つのニーズを実現します.
2:
ウィンドウをリフレッシュするか閉じるかを判断して3番目のニーズを実現
まずAppでvueではmountedフック関数を定義します
 mounted(){
    /**
     *                
     *                             onbiforeunload  onunload
     *         
     *                         
     *            onunload         ,         
     *          3  
     *             helloworld      10  
     *            ,      100   
     *
     *
     *                  ,              localStorage  
     *              ,            ,             
     *            
     **/
    let beginTime = 0;//    
    let differTime = 0;//   
    window.onunload = function (){
      differTime = new Date().getTime() - beginTime;
      if(differTime <= 5) localStorage.clear();
    };
    window.onbeforeunload = function (){
      beginTime = new Date().getTime();
    };
  }

ここで記録して、この構想は他の人を参考にして、リンクはすでに探し出せなくて、修正した後にvueに適用します
プロジェクトの要件を満たす