1

我有一个包含这个的索引组件，部分是：

<template>
  <ul class="nav navbar-nav navbar-right">
    <li v-if="state.user"><a @click.stop="do_logout" v-link="{ path: '/'}">Logout {{ state.user.display_name }}</a></li>
    <li v-else v-link-active><a v-link="{ path: '/login' }">Login</a></li>
  </ul>
  <router-view></router-view>
<template>

<script>

import state from '../state';
import { logout } from '../actions';

export default {
  data() {
    return {
      state
    };
  },
  methods: {
    do_logout() {
      logout().then(() => this.$router.go('/'));
    }
  }
}

</script>

我有一个如下所示的登录组件：

<template>
  <form class="form-signin" @submit.prevent="do_login">
    <input type="email" v-model="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <input type="password" v-model="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
  </form>
</template>

<script>

import { login } from '../../actions';

export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    do_login() {
      login(this.email, this.password).then(() => this.$router.go('/'));
    }
  }
}

</script>

我的登录和注销方法如下所示：

import state from './state';

export const login = (email, pwd) => {
  return fetch_post_json('/api/login', {
    email,
    pwd
  }).then(j => state.user = j.user);
};

export const logout = () => _fetch('/api/logout', 'GET', null, false).then(() => state.user = null);

注销工作正常；单击链接会更改文本并显示“登录”链接。在 Javascript 中登录成功，但不会更新链接。我被迫重新加载页面以使页面正确呈现。为什么？

4

0 回答 0