扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
前言
公司主营业务：成都网站设计、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出邱县免费做网站回馈大家。
最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的ant-design-vue-ms （本地下载）。
权限问题解决思路
对于一个前后端分离的项目而言，权限不再是仅仅靠后端来控制，后端只能控制接口的权限，前台的页面显示还是需要我们来控制，针对vue的项目，首先我想的是当权限不多，并且都是单个权限的情况下，我们完全没有必要使用vue中提供的addRoutes的方法，可以使用动态组件来做，即我们根据后端返回的角色，来细度控制动态组件的显示内容，所谓动态组件其实就是vue内置提供的component组件
相信看到这里，熟悉的同学应该已经想起来了，这样的话，我们就不需要用到vuex，以及路由配置等等复杂的问题，单纯靠后台返回的角色名称就能解决所有的问题了，看到这里是不是觉得今天的内容就这些了，别着急，下面还有“好看的”。
权限设置中的问题
这样虽然能解决一些简单权限的问题，但是针对稍微复杂一些的权限应用，就显得有些力不从心了，当角色过多，并且还包含了混合角色的权限的话，则会衍生出很多问题，这里也是列举我遇到的一些问题，同学们可以细细推敲一下。
所以综上所述，最终我还是选择了传统的addRoutes，那么肯定会有同学问了，既然这个方案不行，那干嘛还要用呢。问得好，其实动态组件就是一种尝试，只有知道错了，不满足需求了，我们才能更知道为什么会去使用传统的addRoutes的权限方案。
权限问题解决方法
所以我们来看看addRoutes带来的一些“好处”：
相信做过权限的同学对上面的内容还是有一些心得的，然后我们按照该有的步骤一步一步来，这些步骤在上面我的github中已经有了，大家可以对照一下。
1、全局导航守卫的设置，此处设置全局导航守卫，我觉得更多是为了数据持久化，大家都知道，vuex虽然非常好用，但是会有刷新丢失数据的情况，因此针对这种情况，我们使用导航守卫，每次刷新的时候，会重新请求后台的接口来获取角色信息。
if (store.getters.roles.length === 0) {
store
.dispatch('GetInfo')
.then(res => {
const roles = res.data.resultData && res.data.resultData.roles
store.dispatch('GenerateRoutes', { roles }).then(() => {
// 根据roles权限生成可访问的路由表
// 动态添加可访问路由表
router.addRoutes(store.getters.addRouters)
})
})
.catch(() => {
store.dispatch('Logout').then(() => {
next({ path: '/user/login', query: { redirect: to.fullPath } })
})
})
} else {
next()
}这里代码做了简化，主要给大家看下上面会有一个角色判断长度，主要是当我们不刷新的情况，页面角色信息不回丢失，因此我们也就没有必要去请求后台获取角色信息了，来节省请求数量。
2. 通过上面的代码可以看到，我们首先是请求的角色信息，然后请求了生成路由的GenerateRoutes的方法，方法是写在vuex中的action里面的，这部分的内容因为网上有很多教程，其实主要归纳一下，就是对路由进行递归过滤，过滤出符合角色的路由，然后将静态路由和过滤出来的动态路由链接起来
const permission = {
state: {
routers: constRouterMap,
addRouters: []
},
mutations: {
SET_ROUTERS: (state, routers) => {
state.addRouters = routers
state.routers = constRouterMap.concat(routers)
}
},
actions: {
GenerateRoutes({ commit }, data) {
//略
}
}
}3、设置我们的路由文件，这部分放到这里来说，主要因为这里还有个小坑，所以也是特地拿出来和大家分享一下
export const constRouterMap = [
{
path: '/',
redirect: '/index',
component: BasicLayout,
children: [
{
path: '/index',
name: 'index',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
meta: {
title: '仪表盘'
}
},
{
path: '/home',
name: 'home',
component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
meta: {
title: '表单页'
}
},
{
path: '/pattern',
name: 'pattern',
component: () => import(/* webpackChunkName: "pattern" */ '@/views/DesignPattern.vue')
},
{
path: '/map',
name: 'map',
component: () => import(/* webpackChunkName: "map" */ '@/views/DataMap.vue'),
meta: {
title: '地图组件'
}
},
]
},
{
path: '/user',
redirect: '/login',
component: UserLayout,
children: [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import(/* webpackChunkName: "login" */ '@/views/user/Register.vue')
}
]
},
//需要注意这里，404的路由一定要写在静态路由中
{
path: '/404',
component: () => import(/* webpackChunkName: "not_found" */ '@/views/NotFound.vue')
}
]
export const asyncRouterMap = [
{
path: '/',
redirect: '/index',
component: BasicLayout,
children: [
{
path: '/controls',
name: 'controls',
component: () => import(/* webpackChunkName: "controls" */ '@/views/Controls.vue'),
meta: {
title: '权限设置',
permission: ['admin']
}
}
]
},
//捕获未定义的路由配置
{
path: '*',
redirect: '/404',
hidden: true
}
]上面关于404页面的定义顺序非常重要，如果在静态路由中定义了捕获的路由path:"*"，而在动态路由中定义了404路由的话，则当导航钩子中判断比较复杂的话，会出现一些意想不到的错误，我就是当时写反了顺序，并且还在导航钩子中做了一些复杂的面包屑的判断，一旦刷新页面的话，则会出现以下错误
这种错误的产生，可能是因为刷新时，导航钩子发现动态添加进来的路由找不到一直进行获取动态路由的方法，导致最后调用栈溢出所导致，因此大家在使用的时候一定要非常小心。
4. 当我们生成路由后，退出应用的切换新的角色账号进行登录时，一定要记得的两件事，第一就是清空vuex里面的角色信息，在不刷新的情况下，这些信息是不会丢失的，当不同角色的账号登录时，原来的角色依然存在，那么肯定会出现问题，其次则是在跳转会登录页的时候，需要设置刷新页面的代码
window.location.reload();
this.$router.push({name: 'login'});先刷新以后再跳转到登录页，这个则是因为addRoutes生成的路由在不刷新的情况下会一直存在，即使下个不同角色的账号登录时，依然会拿之前存在的路由信息去进行过滤，这样过滤的结果必然是当前角色的路由一个都不存在，因此生成的路由信息还是上个角色的路由，所以在完成了之前这些步骤时，一定不要忘记了做这两步，这样也才是一个完整的权限解决方案
尾声
以上也是我在项目中一些收货吧，拿出来和大家分享，也是希望大家少走一些弯路，留心我们开发中遇到的每个看似很小的问题，其实往往是我们最后解决问题的关键，不论是从动态组件还是动态路由，问题的出现也是我们不断去完善自己的过程。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网