Vue3 + Vite 项目搭建-引领您深入理解vue-router及权限控制

2023-09-16 11:49:04

引言

Vue3和Vite的强强联手为前端开发带来了革命性的体验。Vue3的响应式系统和Vite的极速构建速度让开发过程更加高效顺畅。本文将重点探讨如何使用Vue-router进行路由控制，并实现权限管理，帮助您构建一个功能强大且易于维护的后台管理系统。

1. Vue-router简介

Vue-router是一个官方的路由管理库，它为Vue.js应用程序提供了路由功能，允许您轻松地定义和管理应用程序的页面导航。Vue-router具有强大的功能，例如：

定义路由规则，匹配不同的URL路径。
支持嵌套路由，实现复杂的前端架构。
提供丰富的导航API，实现平滑的页面切换。
支持路由守卫，实现路由级别的访问控制。

2. 项目搭建

在项目搭建阶段，我们将使用Vue CLI来创建项目，并安装必要的依赖包。

vue create my-app --preset vue3
cd my-app
npm install vite vue-router

3. 路由配置

在src/router/index.js文件中，我们将定义路由规则：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login.vue'
import Dashboard from '@/views/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      requiresAuth: true
    }
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的配置中，我们定义了两个路由规则：

/login：登录页面。
/dashboard：仪表盘页面，需要登录后才能访问。

4. 路由守卫

为了实现权限控制，我们需要在路由守卫中进行身份验证。在src/router/index.js文件中，我们将添加如下代码：

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

在上面的代码中，我们定义了一个路由守卫，当用户访问需要身份验证的路由时，它将检查用户是否已登录。如果用户尚未登录，则将其重定向到登录页面。

5. 权限控制

在src/store/index.js文件中，我们将定义一个Vuex store来管理用户的登录状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isAuthenticated: false
  },
  mutations: {
    setIsAuthenticated(state, isAuthenticated) {
      state.isAuthenticated = isAuthenticated
    }
  },
  actions: {
    login({ commit }) {
      commit('setIsAuthenticated', true)
    },
    logout({ commit }) {
      commit('setIsAuthenticated', false)
    }
  }
})

export default store

在上面的代码中，我们定义了一个Vuex store来管理用户的登录状态，包括isAuthenticated状态和login和logout操作。

6. 登录页面

在src/views/Login.vue文件中，我们将定义登录页面：

<template>
  <div class="login-page">
    <form @submit.prevent="submit">
      <input type="text" v-model="username" placeholder="Username">
      <input type="password" v-model="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapActions(['login']),
    submit() {
      this.login()
    }
  }
}
</script>

<style>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}
</style>

在上面的代码中，我们定义了一个简单的登录页面，用户可以在其中输入用户名和密码，然后点击“登录”按钮进行登录。

7. 仪表盘页面

在src/views/Dashboard.vue文件中，我们将定义仪表盘页面：

<template>
  <div class="dashboard-page">
    <h1>Dashboard</h1>
    <p>Welcome to the dashboard.</p>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<style>
.dashboard-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>