前言

最近一直在忙一个使用vue的权限管理项目。其实在此之前，我也研究过如何实现vue的特权，并为此写了一篇博客。但是在实际应用到项目中的时候，我还是发现了很多问题，所以这篇文章也会和大家分享一些我在项目中遇到的问题。当然，在我的github仓库中，示例代码是ant-design-vue-ms(本地)

权威问题的解决

对于前端和后端分离的项目，权限不再仅由后端控制。后端只能控制界面的权限，我们还是需要控制前台的页面显示。对于vue的项目，我首先想到的是，当权限不多且都是单一权限时，我们不需要使用vue中提供的addRoutes的方法，而是可以使用动态组件，也就是我们根据后端返回的角色来控制动态组件的显示内容，所谓

Component:是=' current component '/相信熟悉的同学已经记住了。这样就不需要用到vuex、路由配置等复杂的问题，只需要后台返回的角色名就可以解决所有的问题。你认为今天就这些吗？别担心，下面还有“好看”的。

权限设置中的问题

虽然这样可以解决一些简单的权限问题，但是对于稍微复杂一点的权限应用，似乎有点力不从心。当角色太多，包含混合角色的权限时，就会出现很多问题。下面是我遇到的一些问题，同学们可以仔细推敲。

如果是混合角色，动态组件的路由跳转其实就是跳转到一个页面，但是混合角色肯定会跳转到一个页面中不同角色的页面，所以我们可能要写很多层的判断，权限混的越多就越难判断。动态组件的可扩展性相对较差。如果再增加一个权限，就需要再增加一个动态组件的内容，如果出现混合权限，就会有更多的变化。所以综上所述，我最终选择了传统的addRoutes，所以有些同学肯定会问，既然这个方案行不通，为什么还要用呢？这个问题问得好。实际上，动态组件是一种尝试。只有当我们知道它是错误的，不符合要求时，我们才能知道为什么我们使用传统的addRoutes权限方案。

权限问题的解决方案

让我们来看看addRoutes带来的一些“好处”:

一旦在很多地方配置使用，我们配置好动态路由后，无论后期增加多少权限，都可以很好的显示路由跳转，只需要添加新角色的模块，不需要改变代码。遇到混合角色的问题时，如果内容布局相似，我们可以使用自定义指令来区分要显示的模块。这样，如果一个账户同时有多个角色，那么包含该角色的模块也会相应显示，不需要判断显示哪个模块，也不需要为某个角色设置页面显示。相信做过许可的同学对上面的内容有一定的经验，然后我们会按照步骤来做，这些步骤已经在我上面的github里面了，大家可以对比一下。

1.设置全球导航卫星系统。我觉得这里的设置更多的是为了数据持久性。众所周知，虽然vuex非常好用，但是刷新的时候会有数据丢失。因此，针对这种情况，我们使用了导航卫士，每次刷新时，我们都会重新请求后台界面获取角色信息。

if(store . getter . roles . length===0){ store。调度(' GetInfo ')。然后(RES={ const roles=RES . data . resultdata RES . data . resultdata . roles store . dispatch(' generate routes '，{roles })。然后(()={//根据角色权限生成可访问路由表//动态添加可访问路由表路由器。添加路线(商店。吸气剂。addroutes)})})。catch (()={store。调度(“注销”)。然后(()={next ({path:'/user/login '，query: {redirect3360 to。full path } })})else { next()}这里的代码是简化的，主要是给大家看上面会有角色判断长度，主要是我们不刷新的时候。

2.从上面的代码可以看出，我们首先请求了角色信息，然后请求了GenerateRoutes的方法，该方法写在vuex中的action中。因为网上教程很多，其实主要是总结，就是递归过滤路由，过滤出符合角色的路由，然后把静态路由和过滤后的动态路由链接起来。

const permission={ state : { routers : constraoutmap，addRouters: [] }，mutation : { SET _ routers :(state，routers)={ state . addrouters=routers state . routers=constraoutmap . concat(routers)} }，actions 3360 { generate routes({ commit }，Data) {//略}} 3。建立我们的路线文件。这部分放在这里，主要是因为这里有一个小坑，所以也是特意拿出来和大家分享的

export const constructuremap=[{ path : '/'，redirect: '/index '，component: BasicLayout，children :[{ path : '/index '，name: 'index '，//路由级代码拆分//这将生成一个单独的区块(关于。[哈希]。js ),它在访问路由时是延迟加载的。component :()=import(/* webpackchunkname : ' about ' */' @/view/about . vue ')、meta : { title : ' dashboard ' }、{path :'/home '、name :' home '、component :()=import(/* webpackchunkname : ' home ' */' @/view/home . vue ')、meta: { title ://需要注意的是，404的路由必须写入静态路由{path: '/404 '中。component :()=import(/* webpackkchunkname : ' not _ found ' */' @/view/not found . vue ')})export const asyncRouterMap=[{ path 3: '/'，redirect : '/' index '，component: BasicLayout，children :[{ path : '/' controls '，name: ' controls '，component 3:()=import(/* webpackchunk)如果静态路由中定义了捕获的路由路径：'* '，动态路由中定义了404路由，当导航钩子中的判断比较复杂时，会出现一些意想不到的错误。我当时只是写了逆序，在导航钩子里做了一些复杂的面包屑判断。页面刷新后，将出现以下错误

这个错误可能是导航钩子发现动态添加的路由始终找不到获取动态路由的方法时调用栈溢出导致的，所以我们在使用时一定要非常小心。

4.当我们在生成路由后退出应用程序并切换到新的角色帐户登录时，我们必须记住两件事。第一件事是清空vuex中的角色信息。不刷新，这些信息不会丢失。不同角色的账号登录时，原角色依然存在，肯定会出现问题。其次，跳转到登录页面时，需要设置代码刷新页面。

window . location . reload()；这个。$ router . push({ name : ' log in ' })；首先刷新，然后跳转到登录页面。这是因为由添加路由生成的路由将一直存在而不会刷新。即使下一个不同角色的账号登录时，现有的路由信息仍然会被过滤，所以过滤的结果一定是当前角色的路由都不存在，所以生成的路由信息仍然是前一个角色的路由。因此，当前面这些步骤完成后，不要忘记做这两个步骤，这是一个完整的权限解决方案。

结局

以上是我在项目中收到的。我想和你分享一下。也希望大家少走弯路，关注我们发展中遇到的每一个看似很小的问题。事实上，这往往是最终解决问题的关键。无论是从动态组件还是动态路由，问题的出现也是我们不断完善自己的过程。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。