00:01
哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成菜单权限的业务分析。那么什么是菜单权限呢?那就比如说是超级管理员。那你会发现,当他登录咱们项目的时候。作为老板。它是可以操作首页。以及还有什么呢,以及全县谋划。以及商品模块,它都是可以操作的。那比如说咱们呢,还有一个是什么呢?还有个叫做硅谷321这样的员工。那比如说当他登录这个网站的时候,他只能操作首页模块。那么你就会发现一件事,什么事不同的用户。不同的角色登录你这个项目的时候。他所能操作的,所能看见的。
01:02
是不一样的。咱们呢,看一下的已经完成了这个项目。那比如说现在老师是以超级管理员,就是以老板的身份去登录咱们的项目。那么你会发现,对于老板而言,就是对于超级管理员而言。他们是有操作首页权限管理以及商品管理这些模块的能力的。那么除了超级管理员这个角色之外,那当然还有一个是普通的员工,叫硅谷321。比如说他现在的身份有什么?有新媒体,有运维总监,有运维。那假如说老师现在把他所有的角色都给他干掉。那也就是说他只是一个非常非常非常非常普通的一个员工。那么当硅谷321。这个用户。
02:00
他再登录这个网站的时候,咱们可以看一下的硅谷321。对不,密码是123456,它所能看见的,所能操作的只有什么,只有首页。那你会发现一件事,什么事呢?就是不同的用户,哎,不同的用户。对不,比如说不同角色的啊角色。哎,角色。到人物。他们在项目当中。所能哎操作的。或者是看见的。菜单是不一样的。对不?那么回首再看一下咱们正在开发的这个项目。那咱们看一下子,比如说现在老师是以什么呢?是以超级管理员的身份登录咱们的项目,OK。
03:00
他们是有操作首页权限和商品管理的能力的。那假如说我退出登录。我是以硅谷三啊321登录,密码呢是123456,我再去登录的时候。那你会发现一件事,什么事?它也能看见什么,也能看见首页权限管理和商品管理的模块。那为什么呢?为什么人家已经写好的这个项目可以完成不同角色?所展示的菜单是不一样的,而我们不管是以什么样的角色登录都是一样的呢。这个很简单。因为咱们的项目,您可以看一下咱们的路由。看一下咱们的路由,找到咱们的src下的router。看到这儿。咱们呢,这回呢,稍微认认真真仔仔细细的去看一下这里的代码。那首先说像这里在干什么?
04:01
那这里呢,是引入写一下是引入view以及view。对不V。Rou提路由相关的插件。以及在这里呢,是使用。路由插件。对不,那以及这里呢,是引入了咱们股价的最外层,也就是说引入。最外层矮斜下最外层骨架的。一级组建。一级路由组件。对不,那以及底下这里是咱们相关的路由的配置。对不,那这块呢,是咱们的路由的。Page。那为什么说现在咱们的这个项目,我管你是超级管理员还是普通的员工,你登录的时候所能展现的路由都是一样的呢?
05:01
菜单都是一样的。那因为什么?因为咱们的路由是死的。就是说我不管你以什么身份登录,OK。你所能看见的,所能操作的路由。就是这些。是不是咱们项目当中所有的路由。对不就是为什么呢,就是为什么。哎,为什么写一下,为什么就是不同的用户登录我们的项目。那么它的菜单,也就是所谓的这个路由,哎,菜单都是一样的呢。为什么呢?那是因为。咱们O前的路由,哎,它是死的。对吧,因为咱们的路由。是咋的?是死的?什么叫死的呢?就是我不管你是谁,我不管你是谁。
06:04
那么你能看见的。操作的模呃,菜单都是打的都是一样的。因为你会发现,不管你谁登录,那我这里的路由的配置是不是放到了一个数组里面。有登录。有404,有首页,有权限管理,以及也有什么,也有商品分类。就是我不管你是谁登录,OK,你所注册的路由都是这么多。对不?你看咱们注册的路由root等于constant root,其实constant这个单词是常量,常量路由。就说我不管你谁登录进来,OK,你所能看见的路由OK都是这么。对吧,因此咱们的这个项目就是咱们正在开发的这个项目,你会发现不同的用户,我管你谁登录进来。所看见的菜单都是一样的,因为什么,因为。
07:03
哎,咱们注册的路由是哪是死的。它不是活的,什么叫活的呢?什么叫活的呢?就是你的路由,哎,也就是说路由如果。哎,根据不同的用户括弧,也就是说角色你是老板,你还是普通管理员。对吧,你还是普通员工。如果你的路由是活的。对吧,那就说根据不同的用户可以咋的,可以展示不同的菜单。但是咱们目前做不到。那有的同学就可能会问了,那老师咱们怎么实现把路由变成活的呢?就是根据不同的用户登录进来,它所能看见的菜单是不一样的呢。其实这个很简单。老师说一下。怎么实现,如何实现啊,也就是说如何实现菜单的这个权限。
08:02
什么叫菜单权限?就是不同的用户。对吧,所能操作的,所能查看的,哎,菜单是不一样的。那如何实现呢?很简单。那么其实啊。不同的用户,也就是说不同的用户括弧角色。对吧,你是老板呢,还是普通员工啊,当他登录的时候,那么会向向谁呢?会向服务器发请求,因为你得登录啊。那么其实啊,服务器会把用户。相应的菜单的权限的信息。那么返回给我们。那么我们。可以根据服务器返回的。数据。括弧就是这些信息。那么可以动态的咋的去操作路由,或者说设置路由。
09:07
可以怎么呢?可以哎,根据不同的用户,那么展示不同的菜单。咱们呢谈谈。首先说你看这儿。比如说我是超级管理员。那我登录的时候,我是不是要输入用户名和密码,我是不要点击登录按钮。那咱们呢,去找一下子这个登录组件叫views下的。对不?那咱们呢,找到这个登录按钮。那登录按钮在哪儿呢?咱们再往底看,是不是就这登录。那么当你一点击的时候,会触发handler login这个方法。那么你是需要携带用户名以及密码带给服务器的。那咱们呢,找到这个函数,看到看这。
10:02
那这里呢,再进行表单验证。验证你的用户名和密码合不合法。那么如果合法,看这。那么face点点pach会派发一个action。是user模块下的login这个action。对不对,那时候用户要登录了,你得通知VR咋的发请求获取用户信息。能不能登录这些操作?那所以说咱们呢,去找一下子V当中的这个X。在哪儿呢?咱们找一下子,他们应该是在store下的这个MOS下的这个user。这里。其实咱们曾经。抗。那咱们呢,回首再看呀,你看这这在干什么。这里呢,是在引入什么呀,在引入相应的登录。还有退出登录。
11:00
还有获取用户信息的接口函数。那以及这块在引什么呢?这块是不是在引获取token?获取头肯以及设置投肯。以及移除、删除、偷看。的函数。这些操作咱们在前台都搞过。那以及这里也引入了一个呃路由当中的一个路由。模块当中。模块当中重置路由的方法。叫做re。那当然,咱们给它折起来,你看啊,这不就是咱当年的。那三连环吗?State mutation action,当然它的它放在了外面。对不啊,咱们看一下。那首先说它这块呢,放置了一个箭头函数,看一下这。
12:04
那这里呢,是一个箭头函数。叫做guide default state。听这个名字,得到一个默认的。那么这个箭头函数是有返回值的。他返回的是一个对象。而这个对象呢,其实实指就是咱的stay没发现,你看吗?Get state的这个函数一执行,OK。它返回的结果是不是一个对象,那这个对象不就是state吗?那所以说这个space这在干什么,这是不是在获取投。这在干什么?这是不是在存储用户名,哎,存储用户的名字。那一集这玩意在干什么?是不存储用户头像。对不,那说白了。咱们对的值为什么不就是为这个箭头函数返回的这个结果。
13:00
对不,那这不就是state。以及有相应的mutation。对,不,什么叫有?是不是唯一修改state的地方?对不?那咱们呢,一会儿呢,以现在也看一下,你看比如说这个叫re state叫重置state。重置state。他在干什么呢?你看啊,它是objective清除数据这个套,这个套路咱用。State用什么?用get defat get defat这个函数一执行,返回来不又是个空对象吗?这不又把数据咋的,是不是合并,是不是清空了。对不,那以及这里在干什么,这里面是不是当你登录成功之后,是不是在存储偷看。对,不存储头。因为你要拿着token找服务器要用户信息。那以及这里在干什么?是不是在存储用户名?哎,存储用户的名字。
14:02
那以及这在干什么,是不是存储?用户的头像。对不,那这不就是这几个tation。当然。咱们。现在要找的不是他。咱要找的是谁,咱要找的是不是user下的那个哪个哪个action,咱们看一下子啊。找一下子应该是views下这个log in,咱们还是回首看是不是要找user下log in这个action。对不?那所以说老师先把没用的先给它关掉,咱们接着往底下看,这是mutation,那这是啥?这是不是就是仓库user模块的action的地方。A is。对不?那咱们看一下,你看这他在干什么,那这不就log in吗?User下log in。那这里呢,是登录业务。你看啊,比如说当用户输入用户名、密码,一点击登录按钮,会派发一个action,叫login。那也就是说这个action这个函数会执行。
15:01
对不?他会带着用户的信息去发请求的,用户信息包含用户名和密码。以及发请求。对,不,那么发完请求,服务器会返回一个结果,告诉你成功还是失败。那咱们呢,可以打印一下这个result。咱们打印一下,看一下。这个呢是当你登录成功之后,服务器返回的数据。那咱们看一下它返回的是一个什么呢?它返回的是来咱们重新登录一下。它返回的是不是一个对象。Fate当中包含token,这个token你不应该没生。因为登录的时候可以获取到用户,呃的token,将来你是要拿token砸的,获取用户信息的。对不,那你说登录成功,你看他这是在干什么,是不是在存储偷看。存储投谁存储是不是VE叉存储同感。对不,这不就是said token吗?这不就这。
16:02
对不三连环嘛。那以及这是在干什么?这是不是在呃在呃本地持久化。存储头,当年咱们用的是本地存储,而他用的是cookie。那将来你登录成功之后,老师问你,你是不是要拿着token找服务器要啥,要用户信息。那咱们这儿呢,你真得仔仔细看,这在干什么,获取用户的信息。咱们看一下。那虽然说他这里面并没有采用think与away的写法,为什么?因为当时潘家成写这个模板的时候还没有think away。所以说他这里面用到了谁,用到了promise。那比如说获取用户信息,你要携带谁携带ton?对吧,Get info就获取用无信息嘛。如果获取用户信息成功之后,它是不是会返回数据?那这个是什么,这个是哎获取用户的啥,哎用户的信息。
17:03
只有这里面有个判断,如果没有怎么的,咱先给他删了。咱们打印一下这个数据。咱打印一下这个这个这个dateo,第2LOG data。那这个带是什么?就是服务器返回的用户信息,咱们刷新看一下。那你会发现返回的用户信息当中是不包含用户名name,所以说你会发现底下这里是不是解构出name。V叉是不是在存储用户名以及存储用户的头像?阿。但是除此之外,你会发现。返回的用户信息当中还包含着button,是个数字。Rulers是个数组,是个数组。对不?那咱们呢,也去做一下笔记。也就是说,这是获取用户信息,它返回的数据包含什么呢?返回的数据包含用户名。Name。
18:01
对不,以及还有什么呢?以及还有用户的头像,阿瓦塔avatar。那你还有什么ROS?其实这个就是什么呢?这个呢,就是服务器给咱返回的标志。哎,返回到标记。什么标志呢?就是不同的用户。不同的用户。应该。展示。哪些?菜单的标记。咱们可以看,就比如说咱们现在是谁,咱们来老师给你打印一下这个date,咱们看一下。你看can.data。对不,咱们还是得看一下,就比如说现在老师是超级管理员,你看啊。他们所能看到的路由有什么?有首页,有权限管理,有商品分类,你看它是不是包含product?Product的不是商品分类吗?而product下,你看还有什么,比如说还有品牌管理,那不就是trademark。
19:04
平台属性,那不就是a tr吗?对不对,咱们可以给他展开,这里面其实就是服务器给咱返回的一些信息,就是你当前的这个用户可以展示哪些菜单,就比如acl,这不就权限。对不对,Rose不就是角色。对不?你看Rose不有相应的角色管理。那所以说roots就是服务器给他返回的标记,标记了当前这个用户可以展示哪些菜单。那当然,这条数据要不要存储?将来一定要存储。除此之外,还会返回你这个用户的角色是什么叫rule,它也是一个数字。对吧,就是你这个用户的角色。用户角色的信息。对不,你看咱的用户的角色是啥,咱们看一下子咱当前是不是空啊,对不。那还有buttons buttons,它也是一个数组。
20:02
Boots buttons,它是一个按钮的信息,其实它是做什么做按钮权限用的。权限用的标记。说老师,什么叫做按钮的权限?就是有一些按钮,有的用户登录他有,有的登,有的用户登录他没有,就是通过这个信息。去完成。那所以说咱们要存储的数据,不仅仅说只是把用户名。头像要存,这些数据你都要存储的。所以说你看潘家诚写的这个模板,只是存了用户名和头像。那所以说咱们这些都要存,所以说这块咱就给它干掉。那顶上这里咱们看三连环mutation这你的头像啊,还有什么用户名啊,那这些咱们就可以用一个mutation完成。那这里咱们做一个,比如说咱们叫什么呢?叫做存储用户信息的。
21:03
比如说咱们起个名字叫什么,叫做site。User音符。I user。对不?那咱们呢,照葫芦画猫,你看它右侧要的是不是也是箭头函数。也有state和谁和user音符。那也就是说,当你获取用户信息的时候,这些数据都要存的。那咱们就写一下呗,那在这儿干什么?是不是VIVO叉存储用户的全部的信息。那咱们呢,可以打,可以存储一下,就是呃呃,Commit。名字叫什么呢?叫做side girl,叫做user infoo,那存储的是什么?不就是date?贝塔里面不包含这些字段,那咱们就可以分别存储啊。
22:02
比如说state的name。对,不用户名,那就等于user info name。对不,那这存储的什么是用户名。那以及还有什么用户的头像。那应该叫啥叫做点阿玛塔。那等于什么?等于user info点阿瓦塔。那一集还有什么,还有这个菜单权限的标记。它是一个数组。哎,标记。那它叫点root。等于什么?等于user info.root。那以及还有什么按钮权限的标记?那就是state.buttons。对不,哎,等于什么?等于user info.buttons。对吧,它叫S。那些还有角色的信息,你当前用户的是什么角色对吧,角色。
23:05
那就是state.rules等于user info.rules。那咱们呢,得回手测试一下,刷新看一下。咱们在仓库当中能不能存储这些数据?那应该是state下的哪个模块呢?应该是user,那咱们看有没有相应的数据,这都是有。对不?那咱们呢,可以退出登录,咱们看一下的另外的一个身份。沙溪咱们看一下。比如说这回呢,老师登录的是以谁的,是以谁的身份登录呢,就比如是咱们的那个微谷的那个账号。要比如说老师输的是谁,是硅谷321。密码是123456 OK,我已登录。那么当硅谷1231登录的时候,你看现在在V叉当中存储的这个数据。他菜单的权限应该展示哪些菜单,你看一下是不是一个都没。
24:04
对吧?Roots,这不就是服务器返回的菜单权限吗?你要展示哪一些?对不?那以及咱们再看一下子,你看如果是以超级管理员身份登录,你再看。是不是菜单权就有很多了?那所以说将来咱们要拿着服务器返回的信息。和谁呢?和咱们这面的路由要进行对比。对吧,路由是个数据。咱们服务器返回的这个标记,它也是一个数组,那当然咱们在这儿你得存储一下。这儿除了人,是不是还有这个这个菜单的标记。叫ROS是个空数,其实是空数组合,还有角色rules空数组,以及还有咱们的buttons也是个空数组。将服务器数据一回来,是不是进行存储?是不是咱们将来要拿着福气法这个标记?
25:01
和谁和你的路由的这些菜单就路由。竟然经筛选护理。你是超级管理员,你要展示哪一些?你要是普通员工,你要展示哪一些,你是不是要进行筛选?根据不同的用户是不是注册不同的路由。所以说这块一定要注意一件事,其实菜单权限最重要的一件事就是菜单权限。最重要的一件事是什么呢?就是当。用户来,当用户获取用户信息的时候。那么服务器会把相应的用户。那么,呃,拥有的。菜单的权限信息给你返回。那么你需要。根据用户的身份。
26:02
哎,对比出。当前这个用户。需要展示哪些菜单?对吧,所以说这是咱们的一个菜单权限的一个业务的分析。哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去完成菜单权限的业务。那首先说啊,咱们呢,去看一下呢,已经完成的这个项目。那比如说啊,对于超级管理员。那么当他登陆的时候。它所能看见的,所能操作的模块是有首页权限管理以及商品管理这些业务。那么对于咱们的这个普通员工,比如说硅谷三二亿。密码呢,是相应的123456。
27:00
那么当普通员工登录的时候,那么它所能见到的,所能操作的只有首页模块。那咱们呢,刚刚呢也分析过。那当。用户登录的时候。那么服务器端会返回。相应角色的。角色的菜单。权限的信息。那么只不过啊,它返回的信息啊,是一个数组。对吧,咱们叫。那里面呢,放置的是一些什么呢?放置的是一些相应的字符串。对不,比如说有什么SKU对吧,Puu,比如说还有什么。Pro,对不?那这些标记,那不就是相应陆游的名字吗?
28:05
那所以说不同用户。登录这个项目的时候,那么他的菜单应该是活的。那所以说啊,咱们呢,得拿着整个项目的所有的路由信息。和服务器返回的这个标记的信息进行过滤。过滤什么呢?过滤当前这个用户该展示哪些菜单?哪些菜单又不该展示,经过滤?那所以说回到咱们的路由这里,因为服务器的标记的信息已经有了。那么在前面分析的时候,咱们也说过。那对于咱们目前而言。我不管你是什么样的用户登录进来。那么所展示的菜单权限。那不都是这些路由吗?所以说你会发现一件事,什么事,咱们的这个项目。
29:01
我不管你是以超级管理员的身份登录。那么还是硅谷321对吧,密码是123456,还是普通员工进行登录。那么他所看见的路由也是菜单都是一样的。是因为你这里的路由配置的时候。注册的时候他是死的。那所以说咱们这里呢,就不能这么玩了。咱们呢,要把这些所有的路由进行拆分。那也就是说咱们呢,需要把。项目中的路由进行啥呀拆分?说老师为什么要拆分,因为你要想明白一件事,什么事。不同的用户,不同的角色登录进来的时候。那么你所展示的菜单是不一样的,如果你这么写,OK,那你永远展示的菜单,不管是什么样的人物登进来,它都是一样。
30:03
所以说咱们要拆分。那怎么拆分呢?首先说第一个,咱们要拆分出一个叫做常量路油。那么什么是常量路由呢?很简单。那么就是不管,哎,就是不管用户。是什么角色,那么都可以看见的路由。对不?举个例子,我不管你是,你看这儿,我不管你是超级管理员。还是普通员工,你都能看见,谁都能看见登录的路由。对不?所以说咱们的常量路由有谁,咱们可以保留一个,因为这个单词就是常量路由嘛。比如说你看登陆。那对于登录的这个路由,我不管你是超级管理员还是普通员工,你都是可以看见的。所以说咱们把它定义为常量路由。那除此之外还有哪些路由呢?是常量路由呢?
31:03
那就比如说首页。我不管,你是超级管理员。我不管你是普通员工,你都能看见首页。所以说对于首页咱们找一下。那当然404,它也属于常量路由,你访问的路径不对,那当然需要报出啥,是不是404。那以及还有谁呢?以及还有首页,像这些都属于常量。那就比如说不管你是什么角色。对不,我不管你是超级管理员,写下我不管你是超级管理员。还是普通员工?对不,哎,普通的员工,那你们那你都能看见什么登录的路由。那么以及404。对不,那以及还有什么呢?以及还有咱们的首页路由。
32:00
岁数。这样的路由咱们称之为什么呢?称之为常量。那当然还有一种叫什么叫做异步路由。那么,什么叫做异步路由呢?也就是说你不同的用户。哎,不同的用户。括弧角色。那么需要咋的呢?需要过滤,哎,过滤筛选出的路由。那么称之为亦不录用。宋老师,什么是异步路由啊?举个例子。就比如说对于超级管理员而言。它是有权限,有商品管理这两个路由的。而对于谁呢?而对于咱们的普通员工,硅谷321。对不,密码是123456,对于这个普通员工,他是没有权限和商品管理。而这两部分路由是要根据你用户的角色。根据服务器返回的标记是要进行过滤的,到底要不要显示的?
33:05
所以说像这样的路由,咱们称之为什么称之为异步路由。那所以说咱们呢,让当前的路由这个模块。对外暴露一个叫做异步路由,异步路由,那咱起个名字叫做a thinkness think异步S异步路由。那么老师呢?给他来一个数组。那有的同学可能会问,老师,为什么要来一个数组呢?因为很简单。因为因为服务器返回的那个信息。返回菜单的那个信息,它是一个数组。对不对。那么我要拿着当前的这个数组和服务器返回标记的这个数组进行啥进行对比,进行过滤。当前这个用户到底要不要显示这个菜单。这是两个数组进行对比。那所以说咱们又来了一个数字,那这里面放的是异步路由,异步路由有哪一些呢。
34:03
当然,你看啊。比如说权限路由,权限路由有的用户有,有的没有,那所以说是一步。那几项商品分类也是一样。那对于boss超级管理员是有的,那对于普通员工,硅谷321是没有的。所以这两者应该是动态要进行过滤筛选的。所以说咱们把它给它拿出来,这个就是所谓的一步路。那咱们呢,格式化一下。对不对。那当然还有一种。叫做啥呢?叫做任意路由。什么叫任意路由呢?比如说你路径访问错了,你是不是要呃出现404。对不对对不,所以说咱们把404重定向的这个路由,咱们称之为什么呢?称之为叫做任意路。那咱们也来一个呗,叫做啥叫做任意路由。
35:01
那任意路由是什么?那咱来一个export cost,那咱们就叫做安吧,任意uts,它是一个对象。对不?当然咱们的这个任意路由是什么?是不是就是重定向。就是当你路径出现错误的时候写一下。就是当你。路径出现错误的时候啊,出现。哎,错误的时候重定向,重定向到哪,是不是重定向到404。所以说咱们把原来一个完整的整个项目的所有路由拆分文,拆分为三三种。常量什么叫常量?我管你是老板。还是普通员工我都能看见。还有一种叫做异步路由。什么叫异步路由?根据不同的身份。我拿着这个路由的信息去和。
36:00
服务器返回的角色的信息。对吧,菜单的信息进行对比。哪些要展示,哪些要不展示,而且老师问刚才也说为什么要用数组,因为是两个数组,尽量进行对比。当然还有一种叫任意路由。当路径出现错误的时候,重新到404。那接下来你需要怎么搞啊,说老师,那咱们现在已经完事了吗?你想多了。对不,你现在这么一刷新,你看我现在咱们这个路由已经重搞了。如果是超级管理员,你登录进来,OK,你只有首页。对不?那么如果你是硅谷321普通员工,你登录他也只有谁,也只有首页。那为啥呢?因为现在咱们把所有的路由。拆成三份,你注册的只有常亮路。对不对。对吧,所以说现在不不管你是什么样的用户,你登录进来只能看到这些常量。虽然咱们没有完事儿了。
37:01
你要干什么?你是不是要看一下当前用户是什么样的一个角色,是老板还是普通员工?我要去筛选一下子,到底要不要展示这个异步。那么服务器返回的那些信息在哪呢?你想想,其实这俩是我要进行对比的。一个是项目当中已有的所有的异步路由,另外一部分市场是服务器给咱们返回的那些异步路由的标记,他俩要进行对比的。那所以说回到了,回到咱另外一个服务器返回标记的地方。咱找一下应该是store store下的猫下这个user这。咱们看一下。你看吧。咱们刚刚做了一件事,什么事?看一下子存储用户信息对吧,比如说有用户名。头像。那这个是什么,这个呢,要注意这个是服务器返回的。
38:02
菜单的信息括弧。根据。而根据。写下,哎,根据不同的角色。对不?返回的标记信息,但是要注意它数组里面的元素是字符串。对不对。而这个是什么?是当前用户登录之后,他的角色的信息。对不,那这个是什么,是不是按钮。全县的信息。那你说接下来咱们要干什么呢?你就想想咱们的异步路由,就是这个,这个异步路由到底要不要显示取决于什么,是不是要取决于用户登录之后。它返回的标记当中有没有这个字段,他俩得得咋得对比,对比出这些异步路由哪些该展示,哪些不应该展示。对不对,所以说你要计算出,计算出什么,计算出整个项目当中不同用户登录之后到底该显示哪些异步路由。
39:08
是显示一个呀。还是都不显示啊,你是不是得算出来。那所以说咱们做一件事什么事。你要拿着项目当中已有的这些真实的异步路由。和服务器返回的这个呃,标记的这个数组的信息进行对比。对比出当前用户到底要该展示哪些异步。哪些展示,哪些不该展示,你需要咋的算出来?将来你要重新配置咱们的路由的。那所以说怎么搞。那其实啊,咱们可以这么。咱们呢,给咱们的仓库再加一个字段。比如说这个是什么,这个是咱们对比,哎,对比之后。谁和谁对比啊,是不是相中。
40:01
已有的,哎,写一下已有的异步路由。对吧,是不是那个数组,数组里面套对象与谁与服气。返回的标记的信息,什么叫标记的信息?是不是到底要展示哪些异步路由的那些信息进行对比。进行对比。最终需要展示的路。那比如说咱们起个名字。叫什么?比如叫做result结果。异步a sync。对不既不路由ROS是个啥,是个数字。但是你要注意将来这个数组里面应该装什么呀?你装的是不是应该是这两个当中到底是A谁该有,谁没有,你放的应该是应该是一个对象。对不?对不,因为咱们的异步路由只有两个,一个是权限,一个是商品分类,那就说将来咱计算出来的这个东西,你要注意。
41:02
它里面要么有零个元素,要么有一个,要么有两个。二数组里边的元素应该是什么?应该是对象。但是问题是怎么算呢?对不,你怎么给他赋值?那很简单,你看啊。当获取到用户信息的时候,你看啊,咱找到咱获取用户信息,这里走到这儿。那我可以怎么办?你就想想服务器返回标记的数据都能拿到,备点root能吧。以及咱们路由当中这一步路由的数据能拿到,能因为对外暴露。对不?那所以说咱们可以怎么办,数据都能拿到,那你就可以怎么办,提交嘛,Commit。咱们叫什么?叫做site杠,咱叫啥呢?咱就叫做result a sickness。Root对吧,叫UT result asy n ROS。
42:02
那你要干什么?你是不是要给咱们最终计算出来这个异补路油是不是要进行赋值啊?对不,那咱先写一下。这个是干什么,是不是最终?哎,最终。来写一下最终计算出来的。异步路由。对不?那当然,将来你这里面需要有这样的一行代码。State对吧?哎,State当然语法格式,比如说state还有什么,比如咱们就叫做async。ROS路由。对不?I。那将来你只需要有一行代码,什么代码就是state点汤。等于你等于你啥,等你传进来的这个所有的异步路由,当然咱这个异步路由还没有算出来。对,不叫a sync。A routes。
43:02
那当然咱们目前而言。还没有算出当前这个用户到底需要展示哪些异。对不,那当然,假如说你这儿你穿个啥。对吧,假如说你传个一,那你看咱现在仓库当中存储的数据,你看横的提交mutation。是不是咱们的刚刚新增那个result a think词负的值啥,是不是一,那当然咱想要的不是一。咱刷新看下咱们的项目,咱们可以看一下。对不?咱们看一下咱们的仓库,那当然现在存储的数据应该是应该是一,那当然一不是咱们想要。咱们想要的什么是一个数组?数组里面放的啥是对象啊?对象是啥?就是你那些的异步路由到底是权限还是商品分类。你不可能是一。那所以说你要负的值是啥?是一个异步路由,真真正正的异步流是对象里面有啥,有name,有派,有comp这样的形式。
44:01
但是怎么算呢?很简单。你想想现在服务器返回的数据当中有没有标记的信息?你需要展示哪些路由信息,有没有?有就是date.root。这是一个数组,那另外一个你要筛选的异步路由是不是在哪,是不是在这儿呢?对吧,叫安内入,那你可以怎么办?你可以来,你可以把咱们路由当中的异步路由ay。啊,Async和think和think road说。这是咱的一不论。你就想想吧,你就举个例子,老师问你,咱们这两个数组都能拿到一个叫a single route,一个是谁,是date.route。对不?这俩数组一对比,我不就能对比出当前的这个用户到底该展示哪些异步路由吗?对不?是需要展示。商品分类还是展示权限管理,那不都能计算出来?
45:03
那所以说咱们可以怎么办,可以这么办。别穿一,你一个啥呢,你穿一个计算完结果的,这样就是来一个函数,比如咱们就着叫func。或者不叫UC,叫计算,叫Co mptd计算,计算啥计算E步路由ay。对吧,Asyn root。它是个函数调用。当然这个函数是啥?它反映的结果是啥?是所有的异步,那你得对比。怎么对比那一个是谁?一个是咱们已有的所有的异步路由a think root。那另外一个是啥,你要对比,你想想你是不是得拿到服务器返还那个标记,那不就是date点入资吗。那你对比完的结果,你返回一个数组,数组里面套的啥?套的是实实在在要展示的一步路,那你是不是就复制给他,咱是不是就能存储上。
46:00
那当然咱们目前是没有这个方法。那没有这个方法可以怎么办呢?没办法呀。对不,你自己在咋的,你自己再定义一个函数呗。对不?哎,所以说咱们来看这儿。老师呢,定义一个函数。哎,定义一个函数,这个函数是什么?是两个数组进行对比。那么对比出什么呀?对比出当前的用户到底显示哪些异步路由?对不?那当然咱的含水名就叫它了,那咱起个名叫cost,它等于。等于,等于啥?是不是等于咱们的箭头函数。那当然,这你不能叫date root了,对不?那咱们打印一下,你看他这些玩意儿,它是什么鬼啊,你看嘛,数据一看一切都懂,按例入对不?咱标记个一。那咱们再来一个,这个叫root。
47:00
咱们打印个二二来,咱打印一下,你自己看一下刷新。来看这儿,老师都录。那首先说一,一是什么?是咱们将来项目当中所有的一步,没有权限管理,有什么有product商品管理。那这个是服务器返回的信息,这是两个数组,因为服务器返回的信息标记着你到底该显示哪些。异步路由。对不,就比如PRODUCT1步流要不要显示啊。权限路由要不要显示啊,这里面都有相应的信息。那这两个数组你觉得哪就得对比,你要从这个数组当中筛选出需要用户展示的那些异步。对,不从哪里筛选,是不是从这个真实的路由当中,是不是筛选出将来用户需要展示的一步路由。得过。那所以说咱们搞一下你看啊。那咱们怎么办,是不是过滤出,哎,过滤出。
48:02
当前用户。当前用户可能是超级管理员,也有可能啥,也有可能是普通员工。对不,哎,普通员工。那么需要展示的一步路由。那咋还搞啊?那是不是很简单A。第二,Filter。过滤,你得知道filter函数一执行是过滤。从A数组当中过滤出一些元素,作为新数组里面的元素,这叫过滤。那咱们来一个呗。那咱先问问这个item是什么呀。你看吧,Item来咱打印一下叫item刷新。Item是不是就是你每一个每一个异步路由。对,不是个对象。对不对,对吧,哎,你看,但是你要注意,对于这个一级路,还有相应的二级路叫children菌在里面也有。
49:02
那你是不是得判断判断啥。判断一下。就是说如果root,是不是服务器返回的那个标记的数字。看这个数当中是否包含你,这个路由的名字叫index of。谁呀?是不是item的name?如果等于负一。那等于负一代表啥?代表没有,那不等于负一代表是不是要展示的。对不,这个得知道啊。比如说数组当中,数组当中,那么没有这个元素,返回的索引值是几,是负一,那如果咋的,如果有这个元素。那么返回的索引值一定不是负一。所以说不等于负一代表着代表着服务器返回的这个标记,西一当中是包含这个一步路。
50:00
那有同学说老师简单,直接return true。对不?但是你要注意一件事儿啊,啥事儿。就是对于路由而言,你看啊老师呢,给你打印一下,就是对于路由而言。它不仅仅说只有一级路由,还有啥,还有二级路由,你现在这么搞,你是不是只能把一级路由过滤出。对不对,因为对于一个一级路由还有啥,还有二级路由呢。甚至还有可能出现三级、四级、五级路由,你这么搞,你只能是把什么把一级路由是过滤出来。那二级那三级呢。对不对,因为你要明白item它的结构是啥,它是这样的一个结构。等于一。B等于数组,那数组里面是不是还有对象?A等于一对不,它还有二级、三级、四级、五级、六级路由。说这里你这么写是不行的,你得用啥,得用递归。对不?你还得判断判断啥,如果你的item item是不是,呃,伊布鲁E记录。
51:04
如果他有children菌CHILDD2音。对不且且啥且item的children的Les。他有认识。那当然等于零就不会走了,大于零一定是不会走。如果有Les,你要干什么?你需要递归你把子路由是不也要带上?那时item的children应该等于什么?等于咱们的computed和root,把咱们的item.children以及ROOT2记录,三记录在进行对比。那这样咱们是不是就计算出啥,是不是就计算出咱将来这个用户到底需要展示哪些一步。就这块儿要注意递归的目的是啥?就是别忘记还有什么,别忘记还有二级主流。可能还有三集,可能有456级路有。
52:00
对不,所以说这里用到了一个递归。那咱们看一下测试一下对不对,来刷新看一下。在这咱们就看一下,算出这个异步路由是不是对的,举个例子,比如说超级管理员。那看啊,咱一登录进来,你看超级管理员应该有的一步有几个,有应该是有两个。对不,咱找一下子。叫做啊,当然咱们这赋值是不是有问题,明显看到result a sign,呃,Route等于,为啥?因为咱们需要把计算完的,最终这个数组是不是要返回,对吧,你不返回怎么赋值啊。如果你这儿没有返回值,你给传的是不是就按底发对不。所以咱们再刷新再看一下。你看现在是超级管理员,他的异步路由应该有几个,应该是有两个,你看吧。一个是权限。对,不一个是商品分类。那么如果你是什么呢?如果你是普通员工,硅谷123啊,硅谷321。
53:04
对不登录密码123456,那你的异步路由应该是一个都没有。对不,那咱们看下对不对。哎。但是有的同学可能会说,老师,完事了吗?没完事儿啊。为啥?因为咱们现在在路由当中注册的路由只有产量。你只是把当前这个用户,比如说是超级管理员或者普通员工,你只是把他需要展示的一不流算出来了。但是现在路由器这里注册路由只有什么?只有常量。对不对。所以说,你还需要做一件事。什么事呢?就是把你计算出来的这些当前用户需要展示的异步路由啊。你要合并的。除了异步路由还有什么?还有常量路由,还有任意路由,你要合并的,这是最终用户需要看见的路由。那么常量路由和任意路由在哪儿呢?那不就在routes,当router当中,这不这样的吗?
54:04
任意路有喝啥常亮路。那所以说咱们呢,给它引下来,你看啊,这就是一个叫做常量叫constant。一个叫做安妮。那咱们是需要把这三个路由咋的。咋的,是不是给他搞出来。对不,其实咱这个名字吧,你起得好一点啊,起的挺好,你要叫最终的结果什么什么路由是不是叫呃地补名。对不,所以咱们是要合并的。那就是这咱们写一下,你这只是干什么,是不是只是没一叉保存当前用户的啥,是不是异步路由,但是你要注意。一个用户需要,哎,需要展示的完整的路由,它包含什么?是包含常量路由。异步路由还有什么,以及还有这个,这个叫叫任意路由。
55:00
这三部分,所以你在这儿你只是计算出所有的异步路由,所以你要把所有路由合并起来。所以说咱们要干什么呢?要计算出当前用户。需要展示的所有的路由。你看,我把常量路由constant点合并数组合并。跟谁合并?是不是有咱的state.result a look。就是说你所有的异步路由还有什么,还有咱们那个任意路由是不是合并。叫安。对不,那咱们呢,可以存储于V1叉当中,那比如说咱这个企业名,这个啥叫是当前就是用户。那么最终需要展示的,呃,全部路。咱里面咱叫result or ru。等一下,等于数。对不?那所以说在这呢,你就可以把计算完的所有东西,是不是赋值给咱们的result。
56:06
然后,当然是root。对不?那你现在目前而言,只是把用户需要展示的所有路由是不是计算出来了,那咱们看一下子刷新看一下。哎,当然这里面是不是出现了一个呃,语法的错误。对吧,叫any route姿,看这啊看这他是不是报了一个小错误,那咱们看一下子啊看一下。叫安root,这应该没问题吧,看一下子。叫any root,对不?哎,这个是分别暴露,分别暴露,分别暴露没问题,那咱们看一下any roots。啊,咱们在这先给它注释一下,测试一下,看哪块出现错误。对吧,来咱们刷新,先让他跑起来。应该是引入这里出现问题了吗?那咱们看一下。对吧,先把这先给他干掉。对吧,先保证项目不崩啊。
57:02
对吧,啊。咱引入了几个呢,一个是异步,还有啥,还有个是常量。对吧,还有个是任意。对不?那我保存一下吧,看看会不会报错刷新。啊,这明显是不这个名字是不是搞错。ATS,咱们看一下子看下这。这个呢叫export constant any root啊,大写的一部constant,行,那咱复制一下,咱是不是需要引入常量路由。咱给他log。对吧,那这不就是它了。对吧,哎指是他,那以及还有谁呢?以及还有咱们的这个任意路由,它是不是有重名的了,没有啊,这不叫安root。对吧,那咱给他拿过来叫root。我怎我不可能说,因为引入两个常量它不会报错啊。对不?哎,他这个错误好奇怪是吧,那咱们回首来老师搞一下子看这。
58:01
我重新给他起个名字。对吧,比如说啊,咱们呢,这个叫A。对吧,那这个叫这个叫叫叫叫叫叫啊。是不是底下这块有问题,我感觉引入应该是没有问题的,咱们测试一下。老师呢,先把这呢给他注意一下,先让他跑起来,先看一下子啊,先刷新,先让他跑起来。我把这儿呢,先给他干掉这啊,咱还是得测试一下。来,先跑起来。找咱们看一下子,现在当前的这个any root资,咱是不是在用呢?看一下any root资找一下底下。找一下底下这。呃,咱找一下盖的info这啊,咱查一下子。Any root在用没问题。对吧,对的入的值在计算。计算呢,是在哪呢,是在咱的这在计算。Any think a think root,这没问题,看有没有名字重复的啊,Think。
59:04
啊,这都没问,这都没问题对吧,那我只是引两个常量啊。是吧,那咱们再单独写一下子,我看一下子import。一个叫T,呃,叫啥来着。表演啊,叫这个。Root。对不以这两个常量会出现问题是吧,完之后呢,还有一个叫做any roots。啊,我知道这块是不是有重名了。不是臭美,这玩意已经引引入进来了。对吧,哎,这块要注意啊any roots已经引进来了,看这吗。对不对,这不就按那root字嘛,还有个谁叫constant root,对吧,这边出现重名了对吧,不需要再写好,所以说把咱们刚刚写代码那个地方咱给他打开。对吧,找到咱刚刚写代码这个地儿。对吧,给它展开啊,由于重名对吧。
60:00
那咱们刷新看一下,咱最终计算出来的这个数组是不是对的,你看一下啊。比如说当前咱们退出一下。看这就比如说当前啊老师呢,是以超级管理员身份登录,你看啊。来,咱瞄一眼,你看它该有的路由有哪一些,看一下就是造的奥,是不是六个。有谁?有登录。对不有404。有首页。有权限。有商品分类以及还有重立项的,对吧,咱们退出登录,你看咱们测试一下,比如说老师这回再看一下,走啊等会儿,当然咱是要硅谷321。对,不沙气。来咱们看,比如说老师自然叫硅谷321。对不,密码是123456登录,那咱们看一下他应该展示的所有的路由有哪一些,来瞄一眼。看这啊。有谁你看明也少两个,一个是登录。
61:01
一个是404。一个是首页。一个是谁,一个是从地下到404,这明显是对的。但是你会发现一件事,什么事,咱们左侧的这个路由。我管你是谁登录呢,它还只是首页,你看嘛,你超级管理员登录它也是首页,为啥?因为咱们路由这注册的永远是常量路由,所以你这么搞不行的。所以说回到这儿,咱们还需要做一件事,什么事呢?看这。就是给路由器,哎,路由器添加新的路由。所以说咱们呢,需要引进router router有没有有在这儿。对不?所以咱们引一下子,那就是impmport router for at盖。当然这行语句呢,需要注意是添加新的路由,叫router。点ad route为,为什么呢?为。
62:02
第二啊,奥。说老师完事了吗?那咱们看一下子刷新。没有任何意义。对不对啊,你看。对于超级管理员登录,他还只是有首页,那为什么呢?因为潘家成写的这个模板。你看咱审查元素,你看下他的这个菜单栏,你看他是怎么搞的,咱看一下V啊V。咱们瞄一下就力bug啊,应该是力B对吧,你看潘家成是怎么搞的。他呢,应该是在layout下的,这个叫你看。他Li bar是谁呢?就是左侧的菜单栏。OK吧,它便利的是谁呢?你看,We for root in route。入资是怎么来的,是计算出来。那么他取的路由的信息不是从仓库当中拿的。你看他取的这个是什么,咱们可以看一下子。
63:00
cons.log这点Dollar root.option.root你看他这玩意儿拿的可不是咱仓库当中算好的那些用户需要展示所有的路由,你看他他便利的市场。它便利的只有常量路,你看嘛。遗憾吧。对不对,完了你再看。所以说你仓库当中,你计算的再完美都白扯,因为他只展示只展示常量。所以说你让Li bar在便利啥便利菜单的时候,你就不能应该让他只便利常量路由了,应该便利什么?你应该便利的是来自于仓库计算好的那个全部的路。也就是说,也就是说力的棒。那么需要便利的,哎,便利的应该是应该是应该是仓库。那么计算完毕的那个全部。
64:00
对不?所以这里不应该这么写,应该怎么写?应该是Dollar store a Dollar store.user点。那叫啥来着啊,点state。点user,点叫叫,看一下子叫啥来着,叫result or。应该是他,你应该是用仓库当中已经算完的这个所有的路由,你不应该只展示。产量。所以这回咱们刷新看一下子走,你看对于对于谁,对于超级关联是不是要展示这些。那咱们退出登录,你再看一下子,比如说老师登录的是V5321OK,密码是123456,你看他是不是只有手机。完了你你再退出登录,我再看一下子超级管理员,你看是不是只有权限管理商品分类。对不,所以说到这儿咱们完成了菜单的权限。
65:03
那这里一定要注意,这块是潘家成。啊,潘家成就是咱们使用模板的这个人就是潘同学。对不,他便利,哎利这个菜单栏的时候,哎菜单。蓝的时候,那么开始便利的都是常量路由。所以说咱们得给它变啥,变成啥结价。那么应该替换为替换,为什么咱们仓库中。已经,哎计算好的需要。展示的,呃,全部路。所以到此为止,咱们完成了菜单的权限。哈喽,各位小伙伴们大家好。那接下来啊,咱们呢,去聊聊按钮的权限。那首先说啊,咱们呢,刚刚讲完菜单权限的业务。
66:03
那首先说什么是菜单权限呢?就比如说超级管理员。他是拥有整个项目的所有的菜单的权限。而对于我们的一个普通员工,归5321。那么它只有部分菜单的权限。那也就是说啊,哎,不同的用户。他所扮演的角色是不同的。那么能操作。以及能观看的菜单。是咋的,哎,菜单是不同的。这个呢,就是所谓的菜单的权限。当然啊,在很多公司当中开的后台管理系统啊,经常呢也会出现按钮的权限。那么什么是按钮的权限呢?那也就是说不同的用户。啊,也就是说不同的角色。
67:02
比如说观看同一模块啊,比如说项目当中的同一部分,那么有的用户。啊,有的用户是可见这个按钮。那当然。有的用户。怎么的,哎,不可见。啊,用户。不可见。那这个功能怎么去实现呢?那咱们呢,去看一下咱们的这个项目。比如说啊老师呢,现在呢,是以一个超级管理员我的命,也就是老板的身份登录咱们的项。那当然啊,我作为一个超级管理员,是可以看到整个企业当中所有员工的信息。那就比如说啊,咱们目前的这个硅谷321这个普通员工。他呢,现在呢,是没有任何的角色的,也就是说没有任何的权限。
68:04
那比如说啊,老师要给硅谷321添加一个角色,哎。比如说硅谷321是一个什么呢?是一个产品经理。对吧,那咱们点击确定。那也就是说啊,咱们呢,作为一个超级管理员。我新增了一个角色,叫做产品经理。那么我会把硅谷321诶,给他分配一个新的角色。比如说是产品经理。对吧。那么对于这个产品经理而言,它有哪些权限呢?有哪些菜单的权限呢?有哪些按钮的权限呢?那当然都是需要超级管理员去配置。你超级管理员,你得给他相应的权限呢。所以说回到咱们的菜单这里。那么你会发现一件事,什么事,咱们先看这啊,先看角色这儿。
69:01
也就是说现在老师做了一件事,什么事给咱们的硅谷321。啊,分配了一个角色,叫做产品经理。而这个产品经理这个角色有哪些权限呢?这不比如说现在已有的菜单有哪一些呢?看一下子,哎,比如说有权限管理。对不对,有菜单管理。啊以及商品管理,以及订单管理,客户管理,优惠管理。那当然作为超级管理员,他还是可以新增菜单。对吧,比如说老师新增一个菜单啊,叫做什么呢?叫做测试管理。那这个呢,要注意这个呢,相当于给咱的项目当中新增一个菜单的权限,叫做测试管理。它是属于一个一级的,对吧,当然还有二级菜单。那么测试管理的这个功能权限值,这个老师要说一下子什么是功能权限值。
70:03
咱们在做在做什么的时候,在做这个菜单权限的时候,你会发现咱们需要拿着咱们的异步路由的name。和服务器返回标记的那个数组route字接上进行对比。过滤出当前用户需要展示哪些异步路由。其实服务器返回的那个标记即为这个功能权限值。比如说测试管理,哎,测试管理的这个功能权限值呢,咱们就叫做test。OK吧,点击确定。那也就是说我作为一个超级管理员,我新增了一个哎菜单叫做测试管理。那当然对于咱们的项目而言,有一级菜单还有什么,是不是还有相应的二级菜单?那咱们再新增一个,比如说呢,这个名字呢,咱们叫做测试管理一。对不,那么功能权限值呢,咱们叫做test。那以及咱们可以再给他添加一个二级的。
71:03
对吧,比如说叫做测试管理二,那么功能权限值呢,咱们叫做TEST2。对不啊,那有就说我作为一个超级管理员,我新增了一个菜单,这个菜单下呢,有两个二级菜单。而二级菜单下呢,比如说呢,有一些按钮的权限。那当然咱们的这个项目当中,看一下的顶上都是一样的,这是一级菜单,二级菜单以及相应的按钮的权限的标记的设置。比如说测试管理一下,咱们呢,给他新增一个按钮的权限。比如说名字呢,名称咱们就比如说叫添加按钮。对吧,一。那么功能权限值,也就是说按钮权限的这个标记。咱们呢,一般呢都是以BTN开头的。对吧,比如B天点ad。对不?那这里要注意老师为什么以BTN开头,因为所有模块,所有的按钮的权限的标记呢,都是以BN开头。
72:07
那比如说咱们再来。对吧,咱们给这个测试一管理下添加两个按钮的权限。比如咱们再来一个,那这个呢,叫做添加按钮二。I添加按钮二,那这个呢叫做BT啊点ADD2对吧,咱也给他来一个。对吧,那以及咱们的给测试管理二呢,也添加一个按钮的权限,比如说叫做添加按钮三,哎,添加。按钮三。那么功能权限值呢?咱们叫做B tn.AD3。那么刚刚老师啊,其实做了一件事什么事,相当于超级管理员,就是老板是不是新增了一个菜单的权限,就新增了一个菜单。这个菜单呢,有一级菜单和二级菜单。那当然二级菜单当中呢,又有相应的按钮,有几个按钮呢?一共有三个,每一个按钮都有属于自己相应的标记。
73:06
那咱们呢,回首再看一下。那么对于对于咱们这个硅谷321。这个咱们测试账号,他现在是一个产品经理,那么产品经理由哪些权限呢?当然是不是由咱们的超级管理而决定。所以说接下来呢,老作作为超级管理员的我,我要给这个硅谷321这个产品经理,我给的授权一些权限。比如说将来,比如说将来。硅谷321这个产品经理,他拥有着商品管理的权限。以及测试管理的权限。那么当你点击保存按钮的时候,那就相当于给产品经理是不是,哎,给他两个权限。分别是商品管理,可以看到商品管理相关的,以及还有测试管理相关的。但是这里面呢,要注意一件事。
74:01
咱们这里面呢,用到了一个叫做chin组件。啊,用到了一个组件。看一下。啊,用到了一个train组件。那当你当超级管理员点击保存的时候,那你是要把这些收集到的信息是不是要提交给服务器,服务器是不是要进行保存?那这里呢,需要注意一件事,什么事呢?咱们勾选的这些节点的ID是需要拿到的。对,不点击保存,你是要把这些信息提交给服务器的,服务器要进行存储,他得知道产品经理这个角色拥有着哪些权限,将来要返回相应的标记。但是这里面呢,需要注意一件事。饿了么UI源码当中是没办法把某一个匹配的节点的ID获取到。就比如说我现在勾选的是呃,更新SKU。我选中它,那我是不是要把它的信息以及负节点的信息是不是都要带给服务器,但是要注意饿了么UI当中是获取不到负节点的ID的。
75:05
所以说咱们是要改饿了么UI当中的一个源码。咱们看一下。比如说在咱们的a c views下的这个权限管理模块下。咱们的这个看一下应该是哪一部分,应该是角色管理者啊,应该是。肉下呢,咱们用到了一个CH组件,看这。他这用到了train组件。但是呢,这里面呢,需要注意一件事,老师在底下呢,也做了相应的笔记。比如说vuee当中的饿了么UI train train数形控件,他如果想获取负节点的ID的实例,需要修改源码。因为饿了么UI当中的这个组件,它是没办法获取到负节点的ID的。但是咱们这个项目是需要把负极点的ID也要带给啥,带给相应的服务器作为参数带去。
76:00
那咱们看一下,它分为两种情况,情况一是啥?是饿了么UI没有实现按需引入打包,比如说完整的引入。另外一种呢,是按需引入。那咱们呢,去命点GS当中,咱们去看一下咱们的饿了么UI是怎么引的,是不是全部引进来了,没有按需加载。对不,所以说呢,咱们现在这种情况应该属于情况一。那需要修改no MOS下,那咱们找一下子是需要修改no MOS下的这个饿了么UI咱们找一下。黄蝶找一下。是需要修改它的源码的,所以说呢,咱们呢往底下找一下。对吧,E开头的。哎,这的对吧,需要修改no modus下的饿了么UI下的lib下的一个叫做EL啊饿了么I杠。点JS就是它。
77:00
需要修改什么呢?咱们看一下子需要修改的是,呃,咱们瞄眼啊,应该是两万多行的这个。来找一下,找找咱们那个组件啊,这个老师看一下。往底下看一下,找到咱们的那个组件啊。就是这儿,那么需要修改的是25382行的这样这句话。对不,那所以说咱们找到啊,叫做25382。那咱们呢,细点心给他找到。哎,找到咱们顶上刚刚的那个文件。往顶上跑一下。25382记住了啊,这个老师去找一下这个文件。哎,行,咱们找一下子。这呢,找到25382,好找一下25382。
78:01
25382找一下在这儿呢,需要把这行代码给它去掉。Include以及加上语对吧,那咱们呢,保存一下。保存一下。那咱们的回首再去搞一下子。好,那咱们再回到这儿,再搞一下刷新。找你。好吧,那也就是说啊,对于咱们的刚刚的这个硅谷321,他现在呢,已经是一个产品经理。而产品经理拥有哪些角色呢?是由老板说了算的。对不?比如说有相应的商品管理的所有的权限。对吧,以及有相应的测试管理的权限。那假如说测试管理权限当中,我只让他能看见添加按钮二和添加按钮三,而添加按钮第一个按钮是看不见,那咱们点击保存一下。对不,那为了测试咱们的这个这个这个这个这个代码刚刚修改的是不是OK的OK,咱们呢,以硅谷321的身份登录一下,看一下它有哪些权限。
79:11
对不,那咱们登录一下子硅谷。哎,硅谷321密码呢,是相应的123456,咱们点击保存一下啊,点击登录一下。咱们看一下。那主要呢,咱们呢,去看一下咱们的数据,找一下咱们的数据,对吧,找一下VIVO。这么这里面呢,包含着当前硅谷321的一些信息。咱们先看一下子,它的路由的权限包含包含哪一些root资,你看现在是不是有商品分类相关的,品牌相关的,你看这不咱当年写的嘛。以及有相应的测试管理的test test1 test2,所以说这块就是咱刚刚设置的那个权限值。对不?所以说咱们搞的是没有OK的,以及按钮呢也有相应的权限,咱们应该是有第二个按钮和第三个按钮权限,而第一个按钮是没有的。
80:08
对吧,那有的同学可能会问了老师,那对于咱硅谷321这个账号,他已经有测试管理的权限了,但是为什么左侧菜单他没有。那你要注意刚刚的操作,只是超级管理员把信息,把你这个硅谷321又有哪些菜单权限,又有哪些按钮权限是提交给了服务器的,那你当你登录的时候,硅谷321登录的时候,你是拥有这些权限的,这是没问题的。相应的菜单的权限,相应的按钮的权限,你确确实实是有,但是你要注意一件事,咱的项目当中,目前而言是没有测试管理这个路由组件的,是没有这个异步路由的。那么老师呢?先把note modus这里给的注释上,这里面的东西有点多。对吧,哎,菜往往上划划,给它关上,要不然这里面看的东西有点多,比较恶心。
81:06
行老师呢,给他关上啊,这个东西确实有点多是吧。好了,老师给他关上。那有的同学可能会问老师,那对于硅谷321已经有测试管理的权限,以及已有相应的按钮的权限了。但是为什么咱们这儿看不见呢?很简单,因为咱们的项目当中,目前是没有相应的这个异步路由的,看没看见。看了吧,咱们现在只有权限管理,首页登录和商品分类,你是没有测试管理模块。所以说咱们呢,还要新增一个文件夹。咱们叫做什么呢?叫做test。那这个呢,相当于是咱的一级路。那以及它有属于自己的啥,是不是属于自己的二级路,那咱们再来,比如说这个叫做T1。对不,那以及咱们再给它添加一个,再给他添加什么T2。
82:01
那当然它应该是属于test里面的,哎,咱给它挪一个地儿,那也就是说因为什么咱们现在看不见,因为你根本就没有相应的路由组件。那所以说咱们呢,给泰一来一个组件。搞一下。对吧,它呢,应该是views下的这个test下的这个test。那咱们呢,给它来一个叫做in,带点will。那对于这个模块下的这个TEST1路由组件,那本身它最多应该有两个按钮对吧?EL-button这个应该叫做添加按钮一。对不,那以及咱们再来EL-button,那这个呢是添加按钮二。那以及对于底下这个这个T2当中应该有一个按钮叫做添加按钮三。对不?所以说咱们呢,搞一下index will。对吧,那这个呢,应该是voe几啊,哎,一。
83:01
对不,那这块呢,应该是有一个按钮EL杠,Button。那这个呢,应该叫做添加按钮三。I添加按钮三。那有的小伙伴可能会说,老师你这不写什么吗?那写了之后是不是应该就有了,没有的。对吧,你看老师给你退出登录。刷新,因为在咱们的项目当中,虽然硅谷321有这个测试管理的权限,但是你只写了组件,你没有配置相应的路由。对不对。对吧,你看咱登录123456,你现在还是只能看见这俩。对不,所以说咱们呢,得配置一下这个异步路由。那有的同学说,老师你怎么知道是异步路路由呢?因为它是由超级管理员决定的,你拥不拥有这个测试管理权限?那所以说找到咱们的view,找到咱们这个路由routes。在这里呢,咱们呢,需要配置一下的相应的路由,那当然T应该是属于一个异步路由。
84:02
它是由超级管理员决定你当前用户能不能看见。那所以说咱们回到这儿。那咱们呢,看下这块呢,分别是权限的和商品的这个路由,那咱们呢,把这个呢给它复制一份。对吧?啊,那这个就是咱们测试管理的路由,那咱写一个,那路径是什么呢?那咱们就叫test。对不?当然咱异步路由的名字你务必要大大写的这个T,为啥呢?因为服务器返回的那个标记是不是首字母大写就是那个路由权限值。因为咱们在写异步路由,哪些需要用户展示,哪些不需要展示,那不就是通过异步路由的内幕和服务器返回那个root兹当中数组的元素字符块进行对比。对吧,那务必是相同的。内及这个title呢,咱们就叫做测试管理。对吧,测试管理,那以及呢,这块呢,是它相应的路径,路径呢,咱就叫做TEST1,因为这是属于它的子路由了嘛,对吧,那这块呢,就叫啥叫做test。
85:07
哎,TEST1,那当然咱这里面的只需要两个就行了。对吧,因为咱就两个测试管理模块。那以及啊,这块的路径咱们得改一下,他们应该是test下的这个TEST1。对吧,哎,TEST1。那这个呢,应该是测试管理,哎,测试。管理。那以及底下这里呢,咱们也需要改一下子,那这块呢,应该是T几T2,那以及这块呢,应该是大写的T2。以及这块的路径呢,也得改一下子,应该是test下的。P2。那以及这块呢,咱们叫做测试管理二。测试管理二对不好了,那咱们呢,登录一下老师呢,先退出登录。你看。其实都已经看见了。
86:01
首先说,作为一个超级管理员,我是夏希。作为超级管理员呢,他呢是拥有着所有的权限的,那当然测试管理他是不是也能看见。而且我作为一个超级关联,我给咱的硅谷321。对不?我给他分配的是产品经理的角色,而产品经理他是能看见什么,他是能看见所谓的商品管理和测试管理这两大模块。而且对于测试管理,它是分为。两个测试管理,测试管理二这两个二级路由的。而对于咱们的硅谷321总共在测试管理下有三个按钮,它只能看见俩,这个是看不见的。对不对。那所以说咱们退出登录,以咱们的产品经理硅谷321的身份去登录一下。对不对,所以这块呢,你要去理解一下啊,这个咱登录一下。咱们呢,这回呢是以硅谷,呃,硅谷三二一等对吧,哎,硅谷321密码呢是123。
87:07
456对吧,哎,登录一下。所以说你会发现咱们的硅谷321这个账号,它只能看见首页商品管理和测试管理,权限管理是看不见的。对吧,因为超级关联没有给他分为这个权限。那对于测试管理一,测试管理二,它总共是三个按钮,但是对于硅谷321这个账号,也就是这个产品经理,他本身应该只能看见啥,只能看见两个按钮。那你说这些按钮有的是需要隐藏的,有的是需要展示的。那怎么去判断呢?很简单。因为当你登录的时候,服务器呢,会把相应的按钮的权限砸到返回给,返回给。咱们可以看一下。那就是说对于当前的这个用户,硅谷321它有哪些按钮权限呢?那咱们其实在最开始存储的这条数据叫button,其实它就是按钮,按钮的一个啥,就是按钮权限的一个标记。
88:04
你看比如说他有按钮二和按钮三的啥,按钮二和按钮三的权限,没有按钮一的权限。那咱们就要判断这些按钮该不该展示。那所以说回到咱们的这个views下,Test这里,那咱们的得咋的得判断了。就比如说看添加按钮一,那咱们呢,用微刚受。因为对于一个按钮显示与隐藏,你要么用V-if,要么用V纲手,当然用V纲手更合理一些对不?那比如V纲手,那判断的条件是什么呀?那条件不就在仓库当中。你不就在仓库当中吗?对吧?Store下的stay加的user下的这个buttons。你可以怎么玩,可以这么玩,因为它是个数组嘛,你就是判断嘛,Dollar。点state对吧,点user点谁呀?点这个boos buttons是个数组。
89:01
是不,数组有没有包含index of index of,谁呢?来写一下index of,咱们的这个叫BT,对吧?点ADE包不包含这个权限?对吧,那如果等于负一。对吧,如果等于负一代表啥。就数组当中没有这个元素,负一代表数没有,那如果有呢,那就是不等于负一。如果不等于负一,你像这个B tn.ADD这个标记,如果在这个数组当中,他所得到的索引值不是负一,代表说有,那有是真,真不就显示。对不,那咱们先看咱们有没有。咱们作为硅谷321这个账号有没有按钮一。对吧,是没有的对吧,这个老是为了区分开,叫添加按钮一,这个叫添加按钮二,这个咱俩给他来个叫添加按钮三,再给他区分一下,对吧,咱保存一下,你看对于咱硅谷321这个账号有添加按钮一吗?没有,但是它有添加按钮。做这块的条件也是一样的判断。
90:02
对不,那你这块也是一样,咱就直接给他带走。好吧,那这一块判断的条件是啥。可是Z,那这个咱也给他拿过来没杠受,那这块呢,应该是B tn.AD2有没有这个这个添加按钮有的。咱是不是有这个添加按钮二。对不对,你自己回手再看一下子啊,老师给你看一下子走,你看是不是有相相应的添加按钮二的权限,但按钮一是没有。那以及测试管理二当中有没有这个添加按钮,三是有的。对不,那咱呢,给他拿过来。那这块呢,判断一下呢,是啥,是不是BTN几BTN3。所以说你会发现咱们硅谷321这个账号,它的按钮的权限是可以看见几个,看见两个。那咱们再退出登录,你看一下超级管理。超级关联是有相应的,什么是不是应该相应的,这两个按钮是不是应该都有,咱们可以看一下,你看吧。对吧,因为超级关联我说过,他对于所有的这个菜单,所有的按钮都是有权限的。
91:04
但是咱的硅谷321只能看见啊,添加按钮二和添加按钮三对不。所以说咱们完成了按钮的权限,那到底什么是按钮的权限呢?也就是说不同的用户也是不同的角色,有的用户是可见按钮,当然有的是的不可见的。所以说是根据啥,根据超级管理员给有没有给你授权,对吧,拿到这些授权的信息进行对比,你到底是该显示还是不该显示。
我来说两句