vue router实现登录

Vue Router 实现登录功能

在 Vue.js 应用中，使用 Vue Router 实现登录功能通常涉及路由守卫、权限控制和状态管理。以下是实现登录功能的关键步骤：

配置路由守卫

在路由配置中设置全局前置守卫 (beforeEach)，检查用户是否已登录。未登录用户尝试访问受限页面时，重定向到登录页面。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') // 或其他认证状态检查
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

创建登录组件

实现登录表单，处理用户凭据提交，并在成功登录后存储认证令牌并重定向。

<!-- views/Login.vue -->
<template>
  <div>
    <form @submit.prevent="login">
      <input v-model="username" type="text" placeholder="用户名">
      <input v-model="password" type="password" placeholder="密码">
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 模拟API调用
      if (this.username && this.password) {
        localStorage.setItem('token', '模拟token')
        this.$router.push('/dashboard')
      }
    }
  }
}
</script>

处理登出功能

实现登出逻辑，清除认证状态并重定向到登录页面。

methods: {
  logout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

与状态管理集成

对于更复杂的应用，可以将认证状态集成到 Vuex 中。

// store/index.js
export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    clearToken(state) {
      state.token = null
      localStorage.removeItem('token')
    }
  },
  getters: {
    isAuthenticated: state => !!state.token
  }
})

更新路由守卫使用 Vuex 状态：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !store.getters.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

动态路由

对于基于角色的权限控制，可以实现动态路由添加。

// 登录成功后动态添加路由
store.dispatch('login', credentials).then(() => {
  const adminRoutes = [
    { path: '/admin', component: AdminPanel }
  ]
  router.addRoutes(adminRoutes)
  next('/dashboard')
})

这些步骤提供了在 Vue.js 应用中实现登录功能的基础框架，可以根据具体需求进行调整和扩展。