account switch – re-enable, broadcast to all tabs on switch to make them reload and stop confusing people

components/AccountSwitch.vue

@@ -1,5 +1,4 @@
 <template>
-    <!--
     <div v-if="accounts !== undefined && (minimumCount === null || Object.keys(accounts).length >= minimumCount)">
         <div class="card">
             <div class="card-body d-flex flex-column flex-lg-row">
@@ -23,10 +22,9 @@
             <T>user.accountSwitch.helper</T>
         </p>
     </div>
-    -->
 </template>
 
-<script>/*
+<script>
 import {mapState} from "vuex";
 
 export default {
@@ -74,7 +72,7 @@ export default {
                     this.$removeToken(username);
                 }
             }
-        }
+        },
     }
 }
-*/</script>
+</script>

components/Header.vue

@@ -57,7 +57,7 @@
             <NounsNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.nouns.route}`"/>
             <LinksNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.links.route}`"/>
             <CommunityNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.community.route}`"/>
-            <AccountSwitch class="container py-5 hide-if-empty" minimumCount="1" v-if="hoverItem && hoverItem.link === `/${config.user.route}`"/>
+            <AccountSwitch class="container py-5 hide-if-empty" :minimumCount="1" v-if="hoverItem && hoverItem.link === `/${config.user.route}`"/>
         </header>
         <div v-if="config.locale === 'zh' && new Date() < new Date(2022, 0, 1, 0, 0, 0) && $route.path === '/'" class="container">
             <div class="alert alert-info my-3">

layouts/default.vue

@@ -103,6 +103,13 @@
 
             this.loadAds();
             this.loadGTM();
+
+            const bc = new BroadcastChannel('account_switch');
+            bc.onmessage = (ev) => {
+                if (ev.data !== this.$user()?.username) {
+                    window.location.reload();
+                }
+            }
         },
         methods: {
             async confirmAge() {

plugins/auth.js

@@ -42,6 +42,8 @@ export default ({app, store}) => {
     Vue.prototype.$setToken = (token) => {
         const accounts = getAccounts();
 
+        const usernameBefore = store.state.user?.username;
+
         store.commit('setToken', token);
         if (token) {
             const account = parseUserJwt(token);
@@ -53,6 +55,13 @@ export default ({app, store}) => {
             app.$cookies.remove('token');
         }
         saveAccounts(accounts);
+
+        const usernameAfter = store.state.user?.username;
+
+        if (usernameBefore !== usernameAfter) {
+            const bc = new BroadcastChannel('account_switch');
+            bc.postMessage(usernameAfter);
+        }
     };
     Vue.prototype.$removeToken = (username = null) => {
         const accounts = getAccounts();