本文主要介绍Vue简单实现前端权限控制的例子。文中示例代码非常详细，对大家的学习或工作都有一定的参考学习价值。需要它的朋友将和边肖一起学习。

简要描述

最近写了vue控制权限(菜单，路由)的项目，用vuex，addRoutes动态添加路由方法等。共100多行代码，与大家分享~

逻辑梳理

除登录界面和退出界面外，其他界面都添加了令牌验证。

打开页面时，请求获取菜单界面。如果请求不成功，这意味着您没有登录。添加登录页面并*默认重定向到路由。

成功登录后获取令牌，并将令牌存储在会话和请求头中。

登录成功后，获取菜单界面，将请求的路由与vuex中的所有路由进行匹配，得到组件。

获取组件后格式化路由，找到自己的parentId，如果找到就插入到这个元素的子元素中。

想法大致是这样的。听到一些模糊的东西也没关系。按照我的步骤看看代码是怎么写的你就明白了~

实现

1.初始化

route.js

从“vue”导入Vue

从“虚拟路由器”导入路由器

从“@/store”导入存储

Vue.use(路由器)

常量路由器=新路由器()

//全球前线卫士

router.beforeEach(async (to，from，next)={

让userroutes=store。当前用户拥有的state.global.userroutes//userroutes权限

if (userRoutes.length！user routes . filter(item=item . path==to . path)。长度){

下一步(from.path)

返回

}

下一个()

})

导出默认路由器

可以看到route.js中没有路由，因为路由是动态添加的，只有一个全局守卫。作用是登录成功后在用户地址栏手动输入地址，判断路由是否正确，正确的话让他跳转。

状态管理

//state.js

导出默认值{

//所有路线

所有输出： [

//登录页面

{

path: '/demo '，

名称： '演示'，

component :()=import(' @/view/demo ')

},

{

path: '* '，

重定向： '/demo '

},

//主页

{

path: '/'，

component :()=import(' @/view ')，

},

{

path: '/home '，

姓名： '家庭'，

component :()=import(@/view/home)

}

],

//应该将用户匹配的路由添加到带有添加路由的路由中

用户路由： []，

//呈现用户菜单

用户菜单： []

}

所有的路由都需要在状态中定义，用来匹配后台请求的权限，获取组件组件。

Actions.js是主要逻辑，getMenu方法是本文的核心