vue路由跳转实现登录

vue路由跳转实现登录

在Vue中实现登录功能并跳转路由，通常需要结合Vue Router和状态管理（如Vuex或Pinia）。以下是常见的实现方法：

创建登录组件

开发一个登录表单组件，包含用户名和密码输入框以及提交按钮。使用v-model绑定表单数据：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" placeholder="用户名"/>
    <input v-model="password" type="password" placeholder="密码"/>
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      // 登录逻辑
    }
  }
}
</script>

配置路由守卫

在路由配置中设置导航守卫，保护需要认证的路由：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

实现登录逻辑

在登录方法中处理认证成功后跳转：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })

      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      console.error('登录失败:', error)
    }
  }
}

处理登录状态

使用状态管理存储登录状态，便于全局访问：

// store/auth.js
export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: !!localStorage.getItem('token')
  }),
  actions: {
    login(token) {
      localStorage.setItem('token', token)
      this.isAuthenticated = true
    },
    logout() {
      localStorage.removeItem('token')
      this.isAuthenticated = false
    }
  }
})

响应式导航栏

根据登录状态显示不同导航选项：

<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link v-if="!auth.isAuthenticated" to="/login">登录</router-link>
    <button v-else @click="auth.logout">退出</button>
  </nav>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
const auth = useAuthStore()
</script>

权限验证API请求

在axios拦截器中添加认证token：

// utils/axios.js
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api'
})

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

export default instance

以上方法实现了Vue应用中的登录功能与路由跳转，包括路由保护、状态管理和API请求认证。根据实际项目需求，可以进一步扩展和完善这些功能。