Vue登録してログイン状態を維持する方法

ログインに関しては、ログイン状態を維持することが必要です。オンラインでも多くの解決方法がありますが、複雑すぎて、初心者が見るかもしれない顔がぼんやりしています。今は自分でプロジェクトを書いています。しかも、理解しにくい方法を紹介します。
プロジェクトの中には登録してから入るルートがあります。例えば、トップページ、個人センターなどです。
いくつかのルートは登録する必要がないので、ログインページ、登録ページ、パスワード忘れなどです。
どうやってルートを判断しますか？登録が必要ですか？ルートJSの中で文章を作ります。
router.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
 },
}

このように私達は各ルートに入るために登録が必要かどうかを区別しました。
次に私達はロゴin.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：ユーザーが退出するにはlocal Strage.removeItem（「Flaag」）だけでいいです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。