vuejs反应性身份验证小部件

Question

我在导航栏中有一个登录组件，可以在登录表单和注销按钮之间切换。

<div v-if="!loggedin">
      <form action="post" class="form-inline">
        <div class="container">
          <input v-model="username" class="form-control mr-2" placeholder="Usuario" type="text" />
          <input v-model="password" class="form-control mr-2" placeholder="Password" type="text" />
          <button @click.prevent="login" class="btn btn-primary">Login</button>
        </div>
      </form>
    </div>
    <div v-else>
      <button @click.prevent="logout" class="btn btn-danger">Logout</button>
    </div>


export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    login() {
      if (this.username !== "" && this.password !== "") {
        this.$store.dispatch("obtainToken", {
          username: this.username,
          password: this.password
        });
      }
      console.log(this.logedin); // prints false on success
    },
    logout() {
      this.$store.dispatch("deleteToken");
    }
  },
  computed: {
    ...mapGetters(["loggedin"])
  }
};

认证由vuex和jwt支持

   export default new Vuex.Store({
  state: {
    jwt: localStorage.getItem('jwt'),
  },
  getters: {
    loggedin: state => {
      return state.jwt != null
    }
  },
  mutations: {
    updateToken(state, newToken) {
      localStorage.setItem('jwt', newToken)
      state.jwt = newToken
    },
    removeToken(state) {
      localStorage.removeItem('jwt')
      state.jwt = null
    }
  },
  actions: {
    obtainToken(context, credentials) {
      console.log(credentials)
      Axios.post('auth/token/', credentials)
        .then((resp) => {
          context.commit('updateToken', resp.data.token);
          console.log(context.state.jwt)
        })
        .catch((err) => console.log(err))
    },
    deleteToken(context) {
      context.commit('removeToken')
    }
  },
  modules: {}
});

假设我按下退出按钮时，我已经存储了令牌，小部件立即返回以显示登录表单。但并非相反。在进行身份验证之后，我必须刷新页面以使vue显示小部件的身份验证状态部分。由于未显示，这正在影响应用程序的其他部分。

不知道为什么注销后不登录才能使用。两者都依赖于读取商店的getter。有什么想法吗？

Answer 1

没关系将resp.data.token更改为resp.data并修复。