Vue技术开发中如何优化用户登录的体验问题

this.$nextTick(() => {
  // 更新数据或DOM操作
});

<template>
  <button @click="login" :disabled="loading">登录</button>
  <div v-if="loading">正在登录...</div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    login() {
      this.loading = true;
      // 登录操作
    }
  }
};
</script>

import { ValidationObserver, ValidationProvider } from 'vee-validate';

<template>
  <ValidationObserver ref="form">
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input v-model="username" type="text" placeholder="用户名" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input v-model="password" type="password" placeholder="密码" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </ValidationObserver>
</template>

import { Toast } from 'vant';

Toast.fail('用户名或密码错误');

// 存储用户名和密码
localStorage.setItem('username', this.username);
localStorage.setItem('password', this.password);

// 读取本地存储的用户名和密码
this.username = localStorage.getItem('username');
this.password = localStorage.getItem('password');

// 存储token
localStorage.setItem('token', response.data.token);

// 自动登录
if (localStorage.getItem('token')) {
  // 发送请求，验证token有效性
}

// store.js
const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
    }
  },
  actions: {
    login({ commit }, payload) {
      // 登录操作
      commit('setUser', payload.user);
      commit('setToken', payload.token);
    }
  }
});

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth && !store.state.token) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    });
  } else {
    next();
  }
});