Add proper logout logic to menu; let caller hide root options, about link

src/components/menu/ByjoveMenu.vue

@@ -7,7 +7,7 @@
 
         <b-dropdown aria-role="menu">
           <button class="button is-primary"
-                  :class="{'is-danger': user_is_root}"
+                  :class="{'is-danger': exposeRoot && user_is_root}"
                   slot="trigger">
             <b-icon icon="fas fa-user"></b-icon>
             <span>{{ user.short_name }}</span>
@@ -15,14 +15,14 @@
 
           <slot></slot>
 
-          <b-dropdown-item v-if="$store.state.user_is_admin && !user_is_root"
+          <b-dropdown-item v-if="exposeRoot && $store.state.user_is_admin && !user_is_root"
                            aria-role="menuitem"
                            has-link
                            class="root-user">
             <a href="#" @click.prevent="becomeRoot()">Become root</a>
           </b-dropdown-item>
 
-          <b-dropdown-item v-if="user_is_root"
+          <b-dropdown-item v-if="exposeRoot && user_is_root"
                            aria-role="menuitem"
                            has-link
                            class="root-user">
@@ -30,10 +30,11 @@
           </b-dropdown-item>
 
           <b-dropdown-item aria-role="menuitem" has-link>
-            <router-link to="/logout">Logout</router-link>
+            <a href="#" @click.prevent="logout()">Logout</a>
           </b-dropdown-item>
 
-          <b-dropdown-item aria-role="menuitem" has-link>
+          <b-dropdown-item v-if="includeAboutLink"
+                           aria-role="menuitem" has-link>
             <router-link to="/about">About</router-link>
           </b-dropdown-item>
 
@@ -70,22 +71,14 @@ export default {
     name: 'ByjoveMenu',
     props: {
         appsettings: Object,
-        feedbackUrl: {
-            type: String,
-            default: '/api/feedback',
-        },
-        becomeRootUrl: {
-            type: String,
-            default: '/api/become-root',
-        },
-        stopRootUrl: {
-            type: String,
-            default: '/api/stop-root',
-        },
         showLoginButton: {
             type: Boolean,
             default: true,
         },
+        logoutUrl: {
+            type: String,
+            default: '/api/logout',
+        },
         allowFeedback: {
             type: Boolean,
             default: null,
@@ -94,6 +87,26 @@ export default {
             type: Boolean,
             default: true,
         },
+        feedbackUrl: {
+            type: String,
+            default: '/api/feedback',
+        },
+        includeAboutLink: {
+            type: Boolean,
+            default: true,
+        },
+        exposeRoot: {
+            type: Boolean,
+            default: true,
+        },
+        becomeRootUrl: {
+            type: String,
+            default: '/api/become-root',
+        },
+        stopRootUrl: {
+            type: String,
+            default: '/api/stop-root',
+        },
     },
     components: {
         ByjoveFeedback,
@@ -123,6 +136,23 @@ export default {
         },
     },
     methods: {
+
+        logout() {
+            // submit user logout request to backend
+            this.$http.post(this.logoutUrl).then(response => {
+
+                // do logout proper, within our app
+                this.$logoutUser()
+
+                // re-fetch session to get fresh XSRF token cookie; our http
+                // interceptor will handle the rest of that for us.  once we
+                // have token we show the login form again
+                this.$http.get('/api/session').then(response => {
+                    this.$router.push('/login')
+                })
+            })
+        },
+
         becomeRoot() {
             if (this.user_is_root || !this.$store.state.user_is_admin) {
                 return