基于vue,vue-router, vuex及addRoutes进行权限控制问题

前端之家收集整理的这篇文章主要介绍了基于vue,vue-router, vuex及addRoutes进行权限控制问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p style="text-align: center">

基于vuex,vue-router,vuex的权限控制教程,完整代码地址见 nofollow" href="https://github.com/linrunzheng/vue-permission-control">https://github.com/linrunzheng/vue-permission-control

接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程。

首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么。

首先是token。

没有登陆的用户获取不到token的,而登陆后的角色我们会将token存到local或者seesionStorage 因此,根据当前有没有token即可知道是否登陆。

为了存取token并且方便我们操作,可以配和vuex实现

拦截的判断

没有token进入需要权限的页面:redirect到login页面

由于我们路由是动态挂载的,包括 ' ' 和404,所以当匹配不到路由时,也重定向到login

{ if (!store.state.UserToken) { if ( to.matched.length > 0 && !to.matched.some(record => record.Meta.requiresAuth) ) { next() } else { next({ path: '/login' }) } } })

好了,此时用户打开localhost:8080,默认匹配的是''路径,此时我们并没有挂载路由,也没有token,所以来到了login。

输入用户名密码后,有token了,通过store触发* commit('LOGIN_IN')* 来设置token。

但是还是没有路由,目前最开始只有login路由

添加的路由 */ export const DynamicRoutes = [ { path: '',component: Layout,name: 'container',redirect: 'home',Meta: { requiresAuth: true,name: '首页' },children: [ { path: 'home',component: Home,name: 'home',Meta: { name: '首页' } } ] },{ path: '/403',component: Forbidden },{ path: '*',component: NotFound } ]

我们要根据当前用户的token去后台获取权限。

由于权限这块逻辑还挺多,所以在vuex添加了一个permission模块来处理权限。

为了判断是已有路由列表,需要在vuex的permission模块存一个state状态permissionList用来判断,假如permissionList不为null,即已经有路由,如果不存在,就需要我们干活了。

{ if (!store.state.UserToken) { ... } else { /* 现在有token了 */ if (!store.state.permission.permissionList) { /* 如果没有permissionList,真正的工作开始了 */ store.dispatch('permission/FETCH_PERMISSION').then(() => { next({ path: to.path }) }) } else { if (to.path !== '/login') { next() } else { next(from.fullPath) } } } })

来看一下 store.dispatch('permission/FETCH_PERMISSION') 都干了什么

v.path === '') let children = MainContainer.children children.push(...routes) /* 生成左侧导航菜单 */ commit('SET_MENU',children) setDefaultRoute([MainContainer]) /* 初始路由 */ let initialRoutes = router.options.routes /* 动态添加路由 */ router.addRoutes(DynamicRoutes) /* 完整的路由表 */ commit('SET_PERMISSION',[...initialRoutes,...DynamicRoutes]) } }

首先,await fetchPermission()获取后台给的权限数组,格式大概如下

获取权限成功","data": [ { "name": "订单管理","children": [ { "name": "订单列表" },{ "name": "生产管理","children": [ { "name": "生产列表" } ] },{ "name": "退货管理" } ] } ] }

其次根据我们写好的路由数组,进行对比,过滤得到我们要的路由

Meta: { name: '订单管理' },children: [ { path: 'list',name: 'order-list',component: OrderList,Meta: { name: '订单列表' } },{ path: 'product',name: 'product-manage',component: ProductManage,Meta: { name: '生产管理' },children: [ { path: 'list',name: 'product-list',component: ProductionList,Meta: { name: '生产列表' } },{ path: 'review',name: 'review-manage',component: ReviewManage,Meta: { name: '审核管理' } } ] },{ path: 'returnGoods',name: 'return-goods',component: ReturnGoods,Meta: { name: '退货管理' } } ] } ] export default dynamicRoutes

为了对比,我写好了一个递归函数,用name和Meta.name进行对比 ,根据这个函数就可以得到我们想要的结果

{ userRouter.forEach((item,index) => { if (item.name === v.Meta.name) { if (item.children && item.children.length > 0) { v.children = recursionRouter(item.children,v.children) } realRoutes.push(v) } }) }) return realRoutes }

得到过滤后的数组后,加入到path为''的children下面

Meta: { name: '首页' } }, ... ] }

这个时候,path为''的children就是我们左侧的导航菜单了,存到state的sidebarMenu待用。加入到children后,这时DynamicRoutes就可以加入到路由了。

添加路由 */ router.addRoutes(DynamicRoutes) /* 初始路由 */ let initialRoutes = router.options.routes /* 合并起来,就是完整的路由了 */ commit('SET_PERMISSION',...DynamicRoutes])

路由添加完了,也就是action操作完毕了,即可在action.then里面调用 next({ path: to.path })进去路由,这里要注意,next里面要传参数即要进入的页面的路由信息,因为next传参数后,当前要进入的路由会被废止,转而进入参数对应的路由,虽然是同一个路由,这么做主要是为了确保addRoutes生效了。

进入路由后,要开始生成左侧菜单,之前我们已经存到sidebarMenu了,现在需要做的只是递归生成菜单而已,虽然用了element的导航菜单,但是为了递归路由,还需要自己封装一下。这里核心的地方是组件的name,在组件里面有children的地方,又再次使用自己,从而遍历整个tree结构的路由。

刷新页面后,根据我们router.beforeEach的判断,有token但是没permissionList,我们是会重新触发action去获取路由的,所以无需担心。但是导航菜单active效果会不见。不过我们已经把el-menu-item的key设置为路由的name,那么我们只要在刷新后,在afterEach把当前路由的name赋值给el-menu default-active即可。同理,在afterEach阶段获取所有matched的路由,即可实现面包屑导航。

{ next({ path: to.path }) }) } ... router.afterEach((to,next) => { var routerList = to.matched store.commit('setCrumbList',routerList) store.commit('permission/SET_CURRENT_MENU',to.name) })

退出登陆后,需要刷新页面,因为我们是通过addRoutes添加的,router没有deleteRoutes这个api,所以清除token,清除permissionList等信息,刷新页面是最保险的。

最后还有一点,每次请求得带上token,可以对axios封装一下来处理

{ axios .get(url,options) .then( res => { var response = res.data if (response.code === 0) { resolve(response.data) } else { Message.warning(response.message) /* reject(response.message) */ } },error => { if (error.response.status === 401) { Message.warning({ message: '登陆超时,请重新登录' }) store.commit('LOGIN_OUT') window.location.reload() } else { Message.error({ message: '系统异常' }) } reject(error) } ) .catch(e => { console.log(e) }) }) } export default instance

总结

以上所述是小编给大家介绍的基于vue,vue-router,vuex及addRoutes进行权限控制问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/32547.html

猜你在找的Vue相关文章