Vue.js中登录成功后从登录组件重定向至仪表盘组件的方法

嘿，我来帮你搞定这个登录重定向的需求！其实很简单，只需要在axios请求的成功回调里，利用Vue Router的跳转方法就能实现。下面是具体的修改方案：

1. 确保Vue Router已配置 #

首先得确认你的项目已经正确集成了Vue Router，并且仪表盘组件已经在路由表中注册。比如在router/index.js（或者你的路由配置文件）里应该有类似这样的代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue' // 导入仪表盘组件

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' }, // 默认跳转登录页
  { path: '/login', component: Login },
  { path: '/dashboard', component: Dashboard } // 仪表盘的路由配置
]

const router = new VueRouter({
  routes
})

export default router

2. 修改登录方法的axios请求逻辑 #

在你的Login组件的login方法里，添加响应状态的判断，当拿到200状态码时调用$router.push进行重定向：

import axios from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    login () {
      // 清空之前的错误提示
      this.error = ''
      axios.post('http://ztlab01/db-admin/app/v1/login', { 
        email: this.email, 
        password: this.password 
      })
      .then(response => {
        // 登录成功（状态码200），跳转到仪表盘
        if (response.status === 200) {
          // 可选：保存用户凭证（比如token）到localStorage，方便后续鉴权
          if (response.data.token) {
            localStorage.setItem('userToken', response.data.token)
          }
          // 重定向到仪表盘路由
          this.$router.push('/dashboard')
          // 如果不想让用户通过浏览器回退按钮回到登录页，可以用replace代替push：
          // this.$router.replace('/dashboard')
        }
      })
      .catch(error => {
        // 处理登录失败的情况（比如状态码400）
        if (error.response?.status === 400) {
          this.error = '邮箱或密码错误，请检查后重试'
        } else {
          this.error = '登录失败，请稍后再试'
        }
      })
    }
  }
}

3. 可选：添加路由守卫保护仪表盘页面 #

为了防止未登录用户直接访问仪表盘，你可以给路由添加全局守卫，在router/index.js里添加：

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录（通过之前保存的token）
  const isLoggedIn = localStorage.getItem('userToken') !== null
  // 如果要访问仪表盘且未登录，跳转到登录页
  if (to.path === '/dashboard' && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

这样就完成了登录成功后自动跳转到仪表盘的功能，同时还能保护仪表盘页面的访问权限哦！

内容的提问来源于stack exchange，提问作者Mittal Shah