Vue.js中实现密码修改及页面跳转和刷新的完整指南

vue create my-project
cd my-project

npm install axios vue-router

// src/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://www.zhanmeng.net',
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器，添加Cookies
instance.interceptors.request.use(config => {
  const cookies = localStorage.getItem('cookies');
  if (cookies) {
    config.headers.Cookie = cookies;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

export default instance;

// 在组件中
import axios from '@斧/axios';

methods: {
  changePassword() {
    const params = {
      password: this.password,
      newPassword: this.newPassword
    };

    axios.put('/imchat/userInfo/changePassword', null, {
      params: params,
    })
    .then(response => {
      if (response.data.success) {
        this.message = '密码修改成功';
        this.navigateToLoginAndRefresh(); // 密码修改成功后跳转和刷新
      } else {
        this.message = response.data.message || '修改密码失败';
      }
    })
    .catch(error => {
      if (error.response && error.response.data && error.response.data.message) {
        this.message = error.response.data.message;
      } else {
        this.message = '修改密码失败，请检查网络或联系管理员。';
      }
    });
  },
  navigateToLoginAndRefresh() {
    this.$router.replace({ name: 'Login' }); // 跳转到登录页面
    setTimeout(() => {
      window.location.reload(); // 刷新登录页面
    }, 100); // 延迟100毫秒
  }
}

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import LoginPage from '@/views/LoginPage.vue';
import ChangePasswordPage from '@/views/ChangePasswordPage.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: LoginPage
  },
  {
    path: '/change-password',
    name: 'ChangePassword',
    component: ChangePasswordPage
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

<template>
  <BackgroundVideo>
    <div class="container">
      <div class="form-container">
        <h2>修改密码</h2>
        <form @submit.prevent="changePassword">
          <div>
            <label>旧密码:</label>
            <input type="password" id="password" v-model="password" required/>
          </div>
          <div>
            <label>新密码:</label>
            <input type="password" id="newPassword" v-model="newPassword" required/>
          </div>
          <button type="submit">修改密码</button>
        </form>
        <div v-if="message">{{ message }}</div>
      </div>
    </div>
  </BackgroundVideo>
</template>

<script>
import BackgroundVideo from "@/components/BackgroundVideo";
import axios from "@斧/axios";
import router from "@/router";

export default {
  components: {
    BackgroundVideo
  },
  data() {
    return {
      password: '',
      newPassword: '',
      message: ''
    };
  },
  methods: {
    changePassword() {
      const params = {
        password: this.password,
        newPassword: this.newPassword
      };

      axios.put('/imchat/userInfo/changePassword', null, {
        params: params,
      })
      .then(response => {
        if (response.data.success) {
          this.message = '密码修改成功';
          this.navigateToLoginAndRefresh(); // 密码修改成功后跳转和刷新
        } else {
          this.message = response.data.message || '修改密码失败';
        }
      })
      .catch(error => {
        if (error.response && error.response.data && error.response.data.message) {
          this.message = error.response.data.message;
        } else {
          this.message = '修改密码失败，请检查网络或联系管理员。';
        }
      });
    },
    navigateToLoginAndRefresh() {
      this.$router.replace({ name: 'Login' }); // 跳转到登录页面
      setTimeout(() => {
        window.location.reload(); // 刷新登录页面
      }, 100); // 延迟100毫秒
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.form-container {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 300px;
  transform: translateY(50%);
}

label, input, button {
  display: block;
  width: 100%;
  margin-top: 10px;
}

button {
  margin-top: 20px;
  cursor: pointer;
}
</style>