Vueログイン登録、ログイン状態保持

vueログイン登録について、ログイン状態を維持することは、vueプレイヤーが必ず通る道であり、ネット上にも多くの解決方法がありますが、複雑すぎて、初心者が見ているかもしれない愚かな顔があります.今、自分でプロジェクトを書いているので、理解しにくい方法を紹介します.
プロジェクトにはログインが必要なルートがあります.例えば、トップページ、パーソナルセンターなど、ログインを必要としないルートがあります.例えば、ログインページ、登録ページ、パスワードを忘れるなど、ルートにログインが必要かどうかをどう判断しますか.ルートJSで文章を作る
ロuterでjsにmeta区分を追加する
例えば登録ページにログインして、ログインする必要がなくて入ることができて、それではmetaの中のisLoginフラグをfalseに設定します

{
  //  
  path: '/login',
  component: login,
  meta: {
    isLogin: false
  }
},
{
  //  
  path: '/register',
  component: register,
  meta: {
    isLogin: false
  }
},

トップページにログインする必要がある場合はmetaのisLoginフラグをtrueに設定します

{
  //  
  path: '/home',
  component: home,
  meta: {
    isLogin: true
  },
}

これにより,各ルーティングにログインする必要があるか否かを区別した.
次にloginでvueでログイン後のステータスを変更する
axiosを使用してバックグラウンドにログインリクエストを開始します

this.$axios.post("/xxx/login", {user:name,password:pwd})
    .then(data => {
        //    ,    
        if (data.data.status != 200) {
          //iViewUi     
          this.$Message.error(data.data.message);
        //    
        } else {
          //  Vuex     true，  userLogin false
          this.$store.dispatch("userLogin", true);
          //Vuex        userLogin      false，        HTML5  
          //        Flag，  isLogin   ，     Flag    isLogin   ，         。
          localStorage.setItem("Flag", "isLogin");
          //iViewUi     
          this.$Message.success(data.data.message);
          //            
          this.$router.push("/home");
        }
 });

Vuexにはこう書いてあります(プロジェクトにVuexが必要ない場合は、HTML 5をそのまま使って保存すればいい):

export const store = new Vuex.Store({
  //     
  state: {
    isLogin: false,
  },

  //        
  getters: {
    //      
    isLogin: state => state.isLogin,
  },

  //       
  mutations: {
    //      
    userStatus(state, flag) {
      state.isLogin = flag
    },
  },

  //   mutations
  actions: {
    //      
    setUser({commit}, flag) {
      commit("userStatus", flag)
    },
  }
})

ポイントが来ました~,mian.js里

router.beforeEach((to, from, next) => {

  //                
  let getFlag = localStorage.getItem("Flag");

  //          isLogin，      
  if(getFlag === "isLogin"){

    //  vuex        
    store.state.isLogin = true
    next()

    //     ，           ，      
    if (!to.meta.isLogin) {
       //iViewUi    
      iView.Message.error('      ')
      next({
        path: '/home'
      })
    }
  
  //         ，    
  }else{

    //            ，        
    if(to.meta.isLogin){
      next({
        path: '/login',
      })
      //iViewUi    
      iView.Message.info('    ')
    //           ，     
    }else{
      next()
    }

  }

});

router.afterEach(route => {
  window.scroll(0, 0);
});

これにより、Vueのログイン登録が完了し、ユーザーがブラウザを閉じたり、翌日再びウェブサイトにアクセスしたりすると、ユーザーは手動でログインを終了するまでログインの状態を維持することができます.
Tips:ユーザーが終了するにはlocalStorageだけが必要です.removeItem(「Flag」)でOK
何か質問があればメッセージを歓迎します.間違いがあったり、もっと簡単な方法があれば、大いに指摘してください.