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

Question

登录后，我在商店内部和localStorage内部设置了变量"authenticated" = true。

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

（我使用ssr）

由于

Answer 1

1. 在登录时设置Vuex状态authenticated。
2. 请务必清除当您注销用户或应用程序正在启动并且您正在检查时如果JWT仍然有效。

3. 在需要该状态的组件中设置计算变量。 computed() { authenticated () => { return this.$store.state.authenticated } }

4. 在<v-if>的模板中使用它。

祝你好运！

Answer 2

如果您不想使用Vuex，

1. 使用vue-persistent-state设置初始状态{ authenticated: false }。
2. 像使用香草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中，您可以像使用vanilla Vue应用程序一样使用this.authenticated。

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

1. 添加mixin以使initialState在所有Vue实例中都可用，并
2. 注意变化并存储它们。

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