Vue JS，如果用户通过身份验证则显示不同的菜单

Question

登录后，我在 store 和 localStorage 中设置变量 "authenticated" = true。

如果 authenticated==true 并显示不同的菜单元素，我如何检查每个页面？

（我用的是ssr）

谢谢

Answer 1

在登录时设置 Vuex 状态 authenticated。
请务必清除当您注销用户或应用程序正在启动并且您正在检查时，例如如果 JWT 仍然有效。
在需要该状态的组件中设置计算变量。 computed() { authenticated () => { return this.$store.state.authenticated } }
在您的模板中使用 <v-if>。

祝你好运！

Answer 2

如果不想使用Vuex，

设置初始状态{ authenticated: false }和vue-persistent-state。
像在普通 Vue 应用程序中一样使用 this.authenticated。

示例：

import persistentStorage from 'vue-persistent-storage';

const initialState = {
  authenticated: false
};
Vue.use(persistentStorage, initialState);

Vue.component('my-login', {
  methods: {
    login: function () {
      doLogin()  // call to auth API
        .then(() => { this.authenticated = true })
        .catch(() => { this.authenticated = false })
    }
  }
})

new Vue({
  el: '#app',
  created: function () {
    if (loginIsValid) {  // check auth validity upon app bootup
      this.authenticated = true
    } else {
      this.authenticated = false
    }
  }
})

现在 authenticated 在所有组件和 Vue 实例中都可以作为数据使用。对 this.authenticated 的任何更改都将存储在 localStorage 中，您可以像在普通 Vue 应用程序中一样使用 this.authenticated。

如果您想了解其工作原理，the code 非常简单。基本上

添加一个 mixin 使 initialState 在所有 Vue 实例中可用，并且
监视变化并存储它们。

免责声明：我是vue-persistent-state的作者。

Vue JS，如果用户通过身份验证则显示不同的菜单

Vue JS, show different menu if user authenticated

vue.js

vuejs2

nuxt.js