在 Vue.js 应用中，使用 vue-router 可以非常方便地管理路由和跳转，但是在一些需要权限控制的场景下，需要对路由进行权限的验证。vue-router-perm 是一个可以轻松实现路由权限验证的 npm 包。
安装
在项目中使用 npm 安装 vue-router-perm：
npm install vue-router-perm --save
使用
- 在 Vue 项目中，先要引入 vue-router 和 vue-router-perm：
import Vue from 'vue' import VueRouter from 'vue-router' import VueRouterPerm from 'vue-router-perm' Vue.use(VueRouter) Vue.use(VueRouterPerm)
- 在需要进行权限验证的路由配置中，使用 vue-router-perm 提供的
perm属性进行设置：
-- -------------------- ---- -------
----- ------ - -
- ----- ---- ---------- ---- --
-
----- ---------
---------- ------
----- - ------------- ---- --
----- -
------ ----------
--------- ---------
------------------ ---
-
--
- ----- --------- ---------- ----- -
-perm.roles：允许访问该路由的角色列表perm.redirect：未登录或没有权限时重定向到的路由perm.forbiddenRedirect：访问权限被禁止时重定向到的路由
- 在路由跳转前进行权限验证：
-- -------------------- ---- -------
----- ------ - --- -----------
----- ----------
----- ---------------------
------
--
---------------------- ----- ----- -- -
-- ----------------------- -- -------------------------- -
-- ------------------ -
------
----- ---------
------ - --------- ----------- -
--
- ---- -
------
-
- ---- -
------
-
--
------------------------------- -
------- ------
--示例代码
这里提供一个简单的示例代码：
-- -------------------- ---- -------
----------
-----
------- ------ ---- ---------
----
---------------- ------------------------------
---------------- ------------------------------------
---------------- ------------------------------------
-----
---------------------------
------
-----------
--------
------ ---- ---- -------------------
------ ----- ---- --------------------
------ ----- ---- --------------------
------ ------- -
----- ------
----------- -
-----
------
-----
--
---- -- -
------ -
--------- -----
-
--
-------- -
----- -- -
------------- - ----
----------------------
--
------ -- -
------------- - -----
----------------------
-
--
------- -- -
-- --------------- -- ----------------- -- --------------------------- -
---------------------------------------------
-
-
-
---------总结
通过 vue-router-perm，我们可以非常方便地在 Vue.js 应用中实现路由权限控制，可以根据角色的权限限制用户访问某些路由，也可以根据用户是否登陆来限制用户访问某些路由。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601a81e8991b448de452