正文

学会Vue权限控制：路由守卫实战案例解析

/0 浏览量
1024

在Vue.js开发中，权限控制是确保用户只能访问其授权页面的关键环节。路由守卫是实现权限控制的一种有效方式。本文将通过一个实战案例，详细解析如何使用Vue Router的路由守卫来实现权限控制。

1. 环境准备

在开始之前，请确保你的开发环境已经准备好以下工具：

  • Node.js和npm
  • Vue CLI
  • Vue Router

2. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create vue-permission-control

进入项目目录：

cd vue-permission-control

安装Vue Router：

npm install vue-router

3. 配置Vue Router

在src/router/index.js中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
});

在路由配置中，我们为/dashboard路由添加了meta字段，并设置requiresAuth为true，表示该路由需要验证用户权限。

4. 创建登录组件

在src/views/Login.vue中创建登录组件：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 这里可以添加登录逻辑，例如发送请求到后端验证用户信息
      this.$router.push('/dashboard');
    }
  }
};
</script>

5. 创建权限验证工具

在src/utils/auth.js中创建一个权限验证工具：

export function isAuthenticated() {
  // 这里可以添加获取用户登录状态的方法，例如从localStorage中读取token
  return true; // 假设用户已经登录
}

6. 实现路由守卫

在src/router/index.js中添加全局前置守卫：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

这个守卫会在路由跳转之前执行，如果目标路由需要权限验证，并且用户未登录，则会重定向到登录页面。

7. 测试权限控制

现在，尝试访问/dashboard路由：

  1. 如果用户未登录，将会被重定向到/login页面。
  2. 如果用户登录，则可以正常访问/dashboard页面。

8. 总结

通过以上步骤，我们已经实现了一个简单的Vue权限控制案例。在实际项目中，你可能需要根据具体需求进行扩展，例如添加角色权限控制、动态路由等。希望这个案例能够帮助你更好地理解Vue Router路由守卫在权限控制中的应用。

-- 展开阅读全文 --