92-尚硅谷-硅谷通用权限项目-权限管理模块-权限管理前端整合

各位同学大家好，刚才呢，咱们已经完成了用户登录接口以及获取用户信息接口，把接口部分已经做到了，那下面呢，咱们整合前端，然后最终测试效果，这个前端呢，不要求各位能写出来，我这里边给大家整理的一个前端的编写这么一个过程，各位按照我的文档把它整合就可以了，或者说我最后给大家会发一个完整的前端项目，你重点编写后端可以了，前端直接整合就可以，我这里边按照我课件里面的顺序给各位一个一个复制一下，咱最终完成前端的整合，前端与权限的对接，下面咱们开始做一下。按照顺序，第一步呢，我们先完成前端中的这个部分，大家来到里边的这个文件，咱们找到啊，在里边有一个U文件夹中有一个文件叫快点JS，咱们把这个文件打开，说一下它的含义到底是什么。

其实这个文件呢，我们之前啊，前端中应该一直在使用，什么地方用到呢？我们看到啊，在API中咱是定义了很多接口，然后接口中的第一行是不是都引入了，都引入这个request文件，那这文件中是什么，我们再看一遍啊，首先第一个引入的叫X，就是X请求，包括U，包括其他部分，然后这个里边我们看啊，它是创建这个X对象，封装了阿贾请求，在这过程中，然后往下看，下面有两个部分，我们看里边什么意思啊，大家看这个单词interceptors。什么意思，是不是叫拦截器哦，各位注意啊，这个拦截器呢，不是咱们后端才有，前端也有这个拦截器，那什么意思呢？比如我现在你看到啊，这是什么，是不是请求，这个叫什么，是不是响应，比说我现在只要我用这个exu发送请求，每次请求会先执行这个请求拦截器，然后执行之后再进行发送，当接口反应数据会先来到响应拦截器中，最终把数据给我们退。

这是咱们看到的两个拦截器，然后在里边第一部分呢，在请求中，大家看这行，我看见珠这里写到了，大家看什么意思，你把这名字要改成叫token，就是这个名字改成token。我这里改一下啊，为什么改ton，咱们看一下这个代码应该很好理解，大家看这是什么。是不是嗨的头啊，也就是说现在啊，我们在操作中，咱们是从cookie中取到你的token字符串，然后把token字符串放到请求头里边，每次发送通过头进行传递，也就是咱们之前提到的啊，从请求头里边获取你的token字符串，然后最终得到我们相关的数据，所以这个名字要跟我接口中保持一致，咱们叫这个token，这是咱们改的第一部分。

这里边就是从cookie中取这个值，这个啊是咱们提到的改到第一个地方，这个不要改错，改成to。然后咱们继续来看第二部分呢，我们找到这个user文件，就是user用户这个JS文件，咱们找到，我们是在这个位置，我们找一下啊。到里边model中有一个user点，这次咱们把它打开。打开之后在里边加入相关内容，首先第一部分我们看啊，在里边的这个位置，瑞吞里边咱们新增两部分，一个代表咱的菜单，一个代表我们的按钮，注意这个位置别写错，新加部分我都加了，新增这个注释，咱给它放到这里边来，我们找一下啊，就这位置，或者说呢，各位可以用我最终发那个写好的前端，你直接用就可以了，我这里边带着各位来整合一下，这个不要求各位能做到效果就可以了。第一个加上两部分，一个button代表按钮，一个menu代表菜单，然后加上之后我们再来看下面在这个方法里边，就这个里边啊，我们找到应该是在这位置，咱们加上这两方法。

一个是菜单，一个是按钮的处理，把这个我们给它加上。咱们加到最后。这个位置。啊，让它的格式啊，再稍微调整一下。这部分完成完成之后我们继续来看啊，下面在这个get info里边我们加入它相关内容，就是这个内容中呢，之前里边大部分都有，咱们新加的应该就是这两个。咱们先看一下啊，有一个叫你看往下面看，这个是log in登录啊，跟我们之前都一致，然后这个叫get info，然后下面有这个数据，一个是名称，这是什么？咱们之前说那个头像，然后之后呢，我们需要再加上这两个，一个是按钮，一个是菜单，把这两部分给他加进去。

这个我们加到这里。另外注意啊，加的过程中特别说明这两个名字的问题，这个随便写这两名字的问题，就是要跟你接口中一致，咱们看到接口里边大家注意啊，我接口中map中一个叫routes，一个是不是叫buttons，跟你这两名字要保持一致，因为它是取这里面名字，你看啊，date.buttons date.routes最终取到我们做一个commit，这个设置就是放到你这里边来。这个啊是我们写的这个部分，然后继续来看这个完成之后，下面呢，咱们再改方法，就是这个该这边方法新增菜单，还有按钮部分。就是加上这部分，那咱找到啊，在这里边有一个。应该在这个位置get JS把这个咱给他加上。啊，这个位置啊，加一个逗号。现在啊，这一部分完成。

完成之后，下面就是在我们的router这里边，然后咱们来做这个事情，因为咱们现在这个routeor并不是写固定的，咱应该是动态过来的，那咱就处理里边的这些部分啊，下面我们来具体写一下啊，下面部分按照课件中的过程，现在到了第四步，第四步做什么呢？这里写到在root这目录下，咱们建两文件，用于开发环境和生产环境，导入组件这里边的过程，那我们这里边写下啊，首先第一个我建这么一个文件，这个文件应该是由于我们的生产环境叫production，一个叫development，用于开发环境，咱们在root下边分别进行创建。我们找到UR，在这里。第一个文件就是这个文件直接复制就可以了，然后把内容咱给他直接拿过来，就是引入相关这个内容啊，就这个部分。复制，然后第二部分呢，再建一个JS文件叫。

Development，把这个拿过来。创建最终把这个我们也是复制一下啊，就是在这里直接拿过来。注意不要多，也不要少。这个就可以啊，啊，另外一个小问题啊，就是你看我每次复制之后，或者写完代码之后，是不是要手动保存一下，其实各位可以选这个。你看这里是不是自动保存，自动保存就是每次写完代码之后，它不用点CTRLS可以自动保存，跟idea效果是一样的，你可以把这选上，我这么做为了各位看的更方便，知道我这里有一个保存过程，其实这实际自动保存就可以了啊，根据实际来决定啊，然后这个之后我们继续来看啊，下面呢，咱就整体替换一下这个文件叫permission.js里边是你这个就是权限相关的，把这个咱就整体替换一下就可以了。这单直接就拿过来啊。它是在我这个src下面这个permission JS就是在我的这个里边，我把这个整个就替换一下。

这是我们做到的这个步骤，然后这里面就加上我们新的这个内容，它是动态啊，加权限等等这个流程，包括你看啊这个位置。引入我刚才这个文件，目前生产环境或者开发环境用这个来做的。这个啊，我们完成完成之后继续来看啊，下面呢，我们在这个。Rootr里边咱们删除里边之前那个就是in that j在里边自定义路由，然后做这个过程，那咱们啊继续往下写下。注意啊，我这个名字应该是写错了，应该叫router啊，这个名字啊写错了，然后咱们看到啊里边删除就是把这个。注释部分都删掉可以了啊，咱为了防止写错，我把这部分啊，咱就对照这里边我们来找一下啊，在router里边index JS，然后这里边有很多的这个内容，然后咱们把相关的部分给它都删掉就可以了，咱来删一下啊，就是在这个。

啊里找到这里边。然后这位置我们有这些内容，咱们先第一个就是这个404的部分，我课件里面都写到了啊，按照课件各位直接操作可以了，然后下面这个部分再来看，我们有这个斜杠部分，这个保留斜杠，下面这个C的部分，我们都给它删掉。就是它的下面的这个部分啊，咱们统一都给它删掉。这部分都打掉。所以现在啊，这个就可以了，按照课件这个约定，我们删除以下内容，然后之后呢，我们下面啊，在comment里边，我们新建一个文件夹，然后里边加一个页面，为了我们做这个操作，那我们找到啊src这个啊src里边这个com就是组件的意思在这里。

这里边呢，我们新建一个文件夹简，就叫parent wave。写到这里啊，就是新建你的这个组件。新建之后在里面建个文件index.voe，不是index.v。这个完成。完成之后啊，把我们的这段内容咱就直接拿过来，大家看，这内容啊叫rootor wave，就是你的路由会在这个页面中进行显示，View就是视图表示你的这个路由页面显示的位置，比如说点这个用户管理，然后在里面显示，点菜单管理，在里面显示，这个叫inex and we，然后下面我们到第九步layout里边，我们找到这个文件。咱们给他找一下啊，就是在里边这个位置。Comment里边。应该是在这个位置啊，Layout里边有一个common，然后里边有这文件夹，在文件夹中有一个文件，我们看这里边的文件，它叫做index.voe，也就是咱们的这个文件。

就是它把这打开，找到我们改的位置，他改的应该是在这个位置。你看啊，这个结构就是在我们的这里，前面都一样，然后你把这个root里边改成咱们的这个路由，因为咱要动态的那个路由啊，这个给他找到就可以了，这是我们写的第八步，然后第九步咱们怎么做呢？在YouTube里边新建一个这个JS文件，为了添加，你看啊，我这写法啊，BTN是不是就八按钮，咱为了做到那个按钮的那个处理，所以在里边加一个JS文件，所以咱们在us里边找到就是。U这里建一个JS文件。Button permissions，然后把这段内容直接给它过来，为了做到那个按钮权限的一个控制。

然后大家看一遍啊，比如咱后面用这个方法判断按钮是否具备某个权限，如果具备的话操作如果不具备，那这权限或者这个按钮我们就不进行显示，就用它做到做这个隐藏这个效果，用这个叫has hasb t permissions这个方法我们最终会进行判断。这个啊，是我们看到的里面这点。所以现在啊，这一部分我们完成。完成之后我们继续来看啊，最后那就是在这个man.JS中，我们做这么一个引入，因为咱要加上一个按钮权限，那刚才我们是做了自定义，最后在这个程序入口里边，把这给它就是引入进去可以了，就是引入它。Has b TN permissions，就刚才我们写的这个文件的这个内容。啊，所以现在啊，这个我们就完成了，完成之后呢，我们就是后面做的，那就是在我们的页面中可以加上相应的控制，比如说咱们看一下啊，比如咱会测试你看里边啊，比如说咱加上这段表示Dollar符号has BP，然后加上你这个部分，那用它来控制你是否需要进行显示，比如它这只等于false，那咱就不显示，它等于true进行显示啊，就在后面马上测试，所以目前按照课件中的过程，咱们把这个前端就快速做了一个整合。