时间戳

首页 > 解决方案 > vuejs 反应式身份验证小部件

vue.js - vuejs 反应式身份验证小部件

问题描述

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

<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"])
  }
};

身份验证由vuexjwt支持

   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 显示我的小部件的经过身份验证的状态部分。由于不显示，这会影响应用程序的其他部分。

不知道为什么它在注销而不是登录后起作用。两者都依赖于阅读商店吸气剂。有任何想法吗？

标签： vue.jsvuexstate-management

解决方案

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

推荐阅读