首页 > 其他分享 >Vue 中如何进行权限控制?

Vue 中如何进行权限控制?

时间:2023-08-03 18:23:20浏览次数:26  
标签:控制 Vue 用户 组件 权限 路由

随着前端技术的不断发展,越来越多的前端框架被使用在 Web 应用程序中,其中尤为出色的一个就是 Vue。Vue 是一个易于理解并且使用方便的框架,它被广泛地应用于 Web 应用程序的开发中。在大多数 Web 应用程序中,权限控制是至关重要的一部分,如何在 Vue 中进行权限控制就成为了一个十分关键的问题。

本文将介绍 Vue 中如何进行权限控制,内容包括:

  1. 什么是权限控制?
  2. Vue 中如何进行权限控制?
  3. 实例演示

什么是权限控制?

权限控制是一个很重要的概念,在 Web 应用程序中尤其重要。简单地说,权限控制就是将用户分为不同的分类,为每个分类分配相应的用户权限。这样,用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性,使数据更加安全可靠。

Vue 中如何进行权限控制?

在 Vue 中进行权限控制,通常有两种方式:第一种是在路由层面进行控制,第二种是在组件层面进行控制。以下将逐一介绍这两种方法。

  1. 路由层面控制

在路由层面进行控制,可以在路由的元数据 meta 中设置用户权限,然后可以在路由守卫函数中进行校验。如果当前用户的权限符合该路由的要求,则策略继续进行,否则将导航到其他页面。

下面是一个路由示例:

// 定义路由
const routes = [
  {
    path: '/home', // 路径
    name: 'home', // 路由名称
    component: Home, // 路由对应的组件
    meta: {
      requireAuth: true, // 需要用户权限
      roles: ['admin', 'guest'] // 受访问限制的角色
    }
  },
  {
    path: '/login', // 路径
    name: 'login', // 路由名称
    component: Login // 路由对应的组件
  }
];

// 创建路由实例
const router = new VueRouter({
  routes // (缩写)相当于 routes: routes
});

// 添加路由前置守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    // 如果需要,则校验用户是否已经登录
    if (Vue.auth.loggedIn()) {
      // 判断当前用户是否有访问该路由的权限
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next() // 用户有访问权限,直接进入页面
      } else {
        next('/denied') // 跳转到其他页面
      }
    } else {
      // 如果用户未登录,则跳转到登录页面
      next('/login')
    }
  } else {
    next() // 如果不需要登录权限,直接进入页面
  }
});

在上面的代码中,路由的元数据 meta 中设置了 requireAuth 和 roles 两个属性,requireAuth 表示该路由需要用户登录才能访问,roles 表示受访问限制的角色。可以在 beforeEach 路由守卫函数中校验用户权限,如果用户有访问该路由的权限,则进入页面,否则跳转到其他页面。这样,就可以在路由层面进行权限控制了。

  1. 组件层面控制

在组件层面进行控制,可以利用 Vue 的指令来控制组件的显示和隐藏。例如,可以为每个组件设置一个权限属性,然后在指令中判断当前用户是否有访问该组件的权限,如果有,则显示组件,否则隐藏组件。

下面是一个组件示例:

<template>
  <div v-if="allow">
    This is a component that requires authentication.
  </div>
  <div v-else>
    You are not authorized to view this component.
  </div>
</template>

<script>
export default {
  data() {
    return {
      allow: false
    };
  },
  mounted() {
    // 获取当前用户的权限,并根据权限设置组件的显示和隐藏
    if (Vue.auth.getCurrentUserRole() === "admin") {
      this.allow = true;
    }
  }
};
</script>

在上面的代码中,利用 v-if 指令来判断当前用户是否有访问该组件的权限,并根据权限设置组件的显示和隐藏。这样,就可以在组件层面进行权限控制了。

实例演示

下面是一个实例演示,演示如何在 Vue 中进行权限控制。

假设有一个 Web 应用程序,其中包含两个页面:一个需要用户登录才能访问的主页,另一个登录页面。在路由层面进行控制,代码如下:

const routes = [
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      requireAuth: true,
      roles: ["admin", "guest"]
    }
  },
  {
    path: "/login",
    name: "login",
    component: Login
  }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (Vue.auth.loggedIn()) {
      if (to.meta.roles.indexOf(Vue.auth.getUserRole()) !== -1) {
        next();
      } else {
        next("/denied");
      }
    } else {
      next("/login");
    }
  } else {
    next();
  }
});

在上面的代码中,定义了两个路由:home 和 login,其中 home 路由需要用户登录才能访问,而 login 路由不需要登录。在登录成功后,将用户信息保存在浏览器的本地存储中,并利用 vue-auth-plugin 插件来管理用户的状态。

Vue.use(VueAuth, {
  auth: {
    login(req) {
      const username = req.body.username;
      const password = req.body.password;
      return axios.post("/api/login", {username, password}).then(res => {
        const data = res.data;
        localStorage.setItem("user", JSON.stringify(data.user));
        this.user.authenticated = true;
        return true;
      });
    },
    logout() {
      localStorage.removeItem("user");
      this.user.authenticated = false;
      return Promise.resolve();
    }
  },
  http: axios,
  tokenType: "Bearer",
  tokenName: "Authorization",
  storageType: "localStorage",
  user: {
    roles: JSON.parse(localStorage.getItem("user")).roles
  }
});

在上面的代码中,利用 axios 发送登录请求,成功后将用户信息保存在浏览器的本地存储中,并利用 vue-auth-plugin 插件来管理用户的状态。可以通过 Vue.auth.loggedIn() 方法来检查用户是否已经登录,如果返回 true,则表示用户已经登录。

在 home 页面中展示用户信息和登出按钮,代码如下:

<template>
  <div>
    <h1>Hello, {{ user.name }}</h1>
    <h2>Your role is {{ user.role }}</h2>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user"))
    };
  },
  methods: {
    logout() {
      Vue.auth.logout().then(() => {
        this.$router.push("/login");
      });
    }
  }
};
</script>

在上面的代码中,利用 localStorage.getItem() 方法来获取保存在本地存储中的用户信息,然后展示用户信息和登出按钮。利用 Vue.auth.logout() 方法来登出,成功后跳转到登录页面。

总结

Vue 是一个非常强大的 Web 前端框架,在处理权限控制时可以在路由层面和组件层面进行控制,可以根据实际情况选择合适的方式。在实际应用中,还有一些细节问题需要注意,例如用户信息的管理、跨域访问等等。但只要掌握了基本的权限控制原理,就可以较为容易地实现 Vue 中的权限控制。

 

标签:控制,Vue,用户,组件,权限,路由
From: https://www.cnblogs.com/smile-fanyin/p/17604121.html

相关文章

  • 在vue中使用Electron开发C/S架构中的C(客户端界面)
    Electron简介:Electron是利用web前端技术进行桌面应用开发的一套框架。我是用的nodejs版本(16.18.1)和npm版本(8.19.2):创建vue-electron项目,鄙人测试了两种方式创建vue-electron项目,如下所示:1、vue-cli-plugin-electron-builder插件方式1.全局安装vue-cli:  npminstall-g@vue/......
  • 解决Ubuntu系统移动或复制文件权限不够
    Ubuntu系统在图形用户界面下移动文件到本地目录时是不会发生错误的,但是当移动文件到位于本机计算机的目录下时会发生错误提示:权限不够。解决方法:在终端下打开一个具有管理员权限的文件管理器进行文件移动1.打开终端(快捷键Ctrl+Alt+T)2.sudonautilus此时会跳出一个带有权限的......
  • vue 动态绑定style class
    绑定style<!--基本使用--><div:style="{color:activeColor,fontSize:fontSize+'px'}">基本使用</div><!--数组--><div:style="styleArr">123</div><div:style="[astyle,bStyle]"&g......
  • 嵌入式教程_电机控制:2-24 步进电机控制实验
    2-24步进电机控制实验实验目的本节视频的目的是掌握GPIO模拟输出PWM的方法,学习步进电机的控制原理,并实现步进电机的控制。实验原理先来看一下硬件原理图,可看到控制步进电机的管脚分别为:GPIO6[2]、GPIO6[3]、GPIO6[4]和GPIO1[15]。使用的是一路四相五线步进电机,使用的电机驱动芯片......
  • 前端项目时因chunk-vendors过大导致首屏加载太慢,Vue Build时chunk-vendors的优化方案
    1、compression-webpack-plugin插件打包.gz文件安装插件也可以指定版本 我这里下载的是1.1.2版本的,试过更高的版本会有ES6语法的报错,因为我node使用的是v12,如果node版本更高可以尝试更高版本npminstall--save-devcompression-webpack-pluginnpminstall--save-devc......
  • Vue学习笔记:setup语法糖
    在使用VCA方式编写Vue代码是,大部分逻辑都是被setup(){}包裹起来,且最后使用的时候需要return{}出去。比较繁琐,实际上Vue提供了setup语法糖,可以简化这些操作。1不再需要exportdefault与return不使用语法糖写法<template><div@click="handelClick">app-{{msg}}</div></te......
  • 22、ACL访问控制列表-1
    ACL访问控制列表,就是定义不同的规则,设备根据规则进行数据包“允许通过”或者“拒绝”进行分类,从而实现网络访问行为的控制、流量限制等措施。ACL报文规则是顺序匹配,在创建基本ACL或者高级ACL是,根据项目需求,需要建立1条或者多条规则,网络设备接收到流量后,按照规则顺序匹配,如果匹配,......
  • Vuejs+WebApi导出Excel
    前后端分离,前端Vuejs,后端.Net6WebApi后端代码1publicclassSalesReportController:BaseController2{3privateSerilog.ILogger_log=GetLogger<SalesReportController>();4privatereadonlyISqlSugarClient_db;5privateIHostEnvironme......
  • 控制台出现lockdown-install.js文件报Removing intrinsics.问题告警
    查的原因是:警告来自MetaMaskChrome扩展。解决方法:关闭MetaMask扩展程序。参考资料:https://www.jdk5.com/ask/282/what-is-causing-the-warning-removing-intrinsics-arrayprototype-toreversed-in......
  • linux中 文件和目录权限
    在Linux/Unix系统中,每个文件和目录都有权限,权限控制着谁可以对文件或目录进行何种操作。Linux/Unix系统中的文件和目录权限是通过一组三位八进制数来表示的,也称为“权限位”或“权限模式”。每个文件和目录的权限位由三个部分组成,分别表示文件所有者的权限、所属组的权限和其......