npm 包 vue-router-perm 使用教程

在 Vue.js 应用中，使用 vue-router 可以非常方便地管理路由和跳转，但是在一些需要权限控制的场景下，需要对路由进行权限的验证。vue-router-perm 是一个可以轻松实现路由权限验证的 npm 包。

安装

在项目中使用 npm 安装 vue-router-perm：

--- ------- --------------- ------

使用

  1. 在 Vue 项目中，先要引入 vue-router 和 vue-router-perm：
------ --- ---- -----
------ --------- ---- ------------
------ ------------- ---- -----------------

------------------
----------------------
  1. 在需要进行权限验证的路由配置中，使用 vue-router-perm 提供的 perm 属性进行设置：
----- ------ - -
  - ----- ---- ---------- ---- --
  -
    ----- ---------
    ---------- ------
    ----- - ------------- ---- --
    ----- -
      ------ ----------
      --------- ---------
      ------------------ ---
    -
  --
  - ----- --------- ---------- ----- -
-
  • perm.roles ：允许访问该路由的角色列表
  • perm.redirect ：未登录或没有权限时重定向到的路由
  • perm.forbiddenRedirect ：访问权限被禁止时重定向到的路由
  1. 在路由跳转前进行权限验证：
----- ------ - --- -----------
  ----- ----------
  ----- ---------------------
  ------
--

---------------------- ----- ----- -- -
  -- ----------------------- -- -------------------------- -
    -- ------------------ -
      ------
        ----- ---------
        ------ - --------- ----------- -
      --
    - ---- -
      ------
    -
  - ---- -
    ------
  -
--

------------------------------- -
  ------- ------
--

示例代码

这里提供一个简单的示例代码：

----------
  -----
    ------- ------ ---- ---------
    ----
      ---------------- ------------------------------
      ---------------- ------------------------------------
      ---------------- ------------------------------------
    -----
    ---------------------------
  ------
-----------

--------
------ ---- ---- -------------------
------ ----- ---- --------------------
------ ----- ---- --------------------

------ ------- -
  ----- ------
  ----------- -
    -----
    ------
    -----
  --
  ---- -- -
    ------ -
      --------- -----
    -
  --
  -------- -
    ----- -- -
      ------------- - ----
      ----------------------
    --
    ------ -- -
      ------------- - -----
      ----------------------
    -
  --
  ------- -- -
    -- --------------- -- ----------------- -- --------------------------- -
      ---------------------------------------------
    -
  -
-
---------

总结

通过 vue-router-perm，我们可以非常方便地在 Vue.js 应用中实现路由权限控制，可以根据角色的权限限制用户访问某些路由，也可以根据用户是否登陆来限制用户访问某些路由。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601a81e8991b448de452

阅读全文

猜你喜欢

  • npm包generator-r2使用教程

    什么是generator-r2？ generator-r2是一个用于快速生成前端项目结构的npm包，其使用yeoman-generator进行构建。它基于gulp、bower、browserify等流...

    3 年前
  • npm 包 @mig-frankfurt/adonis-eureka 使用教程

    前言 在现代化的分布式系统架构中，服务的注册与发现是一项非常重要的工作。在 AdonisJS 中，可以使用 @mig-frankfurt/adonis-eureka 这个 npm 包来实现服务的自动注...

    3 年前
  • npm 包 node-fetch-fix 使用教程

    在 JavaScript 开发中，我们经常需要进行网络请求。而 Node.js 自带的 http 模块虽然功能强大，但是使用起来相对麻烦。因此，许多开发者都会选择使用第三方库来进行网络请求。

    3 年前
  • NPM 包 webpack-logplugin 使用教程

    在前端开发中，webpack 是一个非常流行的打包工具。它可以把多个 JavaScript 模块打包成一个文件，同时支持使用插件来增强它的功能。在这篇文章中，我们将介绍一个 NPM 包，名为 webp...

    3 年前
  • npm 包 @tiagoroldao/react-jss 使用教程

    前言 随着前端技术的不断发展和各种框架的出现，前端开发变得越来越简单和高效。npm 包是一种十分流行的前端开发工具，它能够加快开发过程，提高代码可重用性。本文将介绍一款常用的 npm 包 @tiago...

    3 年前
  • npm 包 fourpan 使用教程

    随着云计算和互联网技术的快速发展，数据的存储和传输已经成为现代技术领域中不可或缺的一部分。而在前端领域中，文件上传功能也是开发过程中最常见的需求之一。在这个过程中，npm 包 fourpan 可以帮助...

    3 年前
  • npm 包 brain-games_hexlet_project_1 使用教程

    前言 在前端领域，npm 是一个不可或缺的工具，可以方便地安装和管理依赖。而今天我要介绍的是一个名为 brain-games_hexlet_project_1 的 npm 包，它提供了一系列有趣的简单...

    3 年前
  • npm 包 fberthelot.konami-code.js 使用教程

    本文将介绍前端常用的 npm 包 fberthelot.konami-code.js（Konami Code）。文章将从说明功能和用途，使用前提条件，安装和使用等方面详细介绍本包的使用。

    3 年前
  • npm 包 document-promises-pinkie 的使用教程

    前言 在开发中，我们经常需要使用到 Promise 对象来处理异步任务，而在 DOM 操作中，Promise 对象不能直接使用。document-promises-pinkie 是一个实现了 DOM ...

    3 年前
  • npm 包 23mofang-react-native-camera 使用教程

    23mofang-react-native-camera 是一款基于 React Native 框架的摄像头组件，可以快速实现拍照和录像的功能。该组件支持 Android 和 iOS 操作系统，并提供...

    3 年前
  • npm 包 capture-mobile-tweet 使用教程

    在前端开发中，我们经常需要在页面中嵌入来自社交媒体平台的内容，比如推特。而通常我们在 PC 端上查看的推特页面与移动端上的有许多差异，因此在嵌入移动端上的推特时，我们需要有针对性的解决方案。

    3 年前
  • npm 包 strip-geojson-property 使用教程

    什么是 strip-geojson-property？ strip-geojson-property 是一款用于去除 GeoJSON 对象中指定属性的 npm 包。

    3 年前
  • npm 包 egg-webpack-dev 使用教程

    在前端开发中，webpack 是一个非常流行的模块打包工具，而 egg-webpack-dev 是一个基于 Egg.js 框架的 webpack 插件，它可以帮助我们在开发过程中提供实时编译、热更新等...

    3 年前
  • npm 包 key.path 使用教程

    key.path 是一个基于 lodash.get 的 npm 包，它可以方便地从 JavaScript 对象中获取嵌套属性值。这个工具是前端开发中非常常用的一个工具，本文将详细介绍如何使用它。

    3 年前
  • npm 包 knockout-ellipsis-tooltip 使用教程

    在传统的 Web 开发中，我们常常需要在标签或者元素内容过长时使用省略号 (...) 来代表截断的文字内容。但是，当用户需要了解更多的内容时，该如何展现出完整的内容呢？ 在这种情况下，我们可以使用 k...

    3 年前
  • npm 包 tslint-config-m18 使用教程

    前言 在前端开发中，我们经常使用 TypeScript 进行开发，为了保证代码的规范和质量，我们需要使用代码检查工具，如 TSLint。而在使用 TSLint 的过程中，我们需要使用 TSLint 配...

    3 年前
  • npm 包 artillery-plugin-uuid 使用教程

    在前端开发中，压力测试是一个非常重要的环节。Artillery 是一个流行的压力测试工具，它可以帮助我们在开发过程中发现潜在问题并提高应用程序的质量。在 Artillery 中，我们可以使用插件来扩展...

    3 年前
  • npm 包 a-touch-controls 使用教程

    前言 在移动端开发中，常常需要使用手势来进行交互操作。a-touch-controls 是一个适用于 Vue 和 React 的手势组件库，它支持各种手势操作，如手指滑动轮播、单击、双击、长按等。

    3 年前
  • npm 包 samm 使用教程

    在前端开发中，常常需要处理一些日期、时间等数据，而 samm 是一个实用的 JavaScript 库，可以帮助我们更加轻松地管理和操作时间数据。本篇文章将介绍 samm 的使用教程，并给出详细的示例代...

    3 年前
  • npm 包 twdemo-nodejs 使用教程

    前言 twdemo-nodejs 是一个基于 Node.js 的 npm 包，它为前端开发人员提供了一种简单的方式来快速建立一个本地服务器，以便于在开发过程中进行文件系统、网络等相关的调试和测试。

    3 年前

相关推荐

    暂无文章