24-前端页面授权验证

好，咱们已经实现了角色验证，还有权限验证啊，通过咱们添加注解的方式啊，在咱们后端的接口服务当中实现了这个角色验证，还有咱们的权限验证啊，这个功能都实现了，那这块呢？哎，这种实现方式啊，这个可不可以用，可以啊，但是相对而言呢，哎，咱们的哎这个用户体验稍微差一些啊，为什么在页面上所有功能全都能展现出来，但是呢？哎，只有有权限的才能点进去使用，哎没有权限的点进去会报一个异常出来会什么呢？诶提示你没有权限，这样用户体验很差，那最好的办法是什么呢？不同用户登上来是不是看到不同的内容啊？哎，所见即所得啊，咱们的张三登进来，可以根据他的权限展现出所有的这个内容，李四登上来啊，这他没有权限的东西是不是应该不展示啊，这些都不展示出来啊，这样什么呢？用户体验更好，那能不能在前端实现咱们的授权验证呢？当然可以啊，咱们什么呢把这个前端的授权。

验症功能实现一下，那这块呢，哎，咱们前端是用什么呢？Time life来实现的，那这块呢，需要添加个依赖，也就是time life跟咱们的Siri的一个整合依赖啊，咱们把这依赖添加一下，好直接进到工程当中啊，找到咱们的po的X ma，哎去什么呢？添加新的依赖，把依赖添加上啊，当然还不够啊，咱们什么呢？需要解析啊，这个S相关C冒号相关的这个标签信息，咱们得在配置类里面再去添加，哎相关的配置啊，咱们把这个配置也添加上，参考课件啊，添加咱们的相关配置去解析C标签啊，咱们把这个相关的哎配置方法咱们也添加上好这些啊，咱们把环境准备好，那下面呢，带着各位咱们先不着急去动手实现啊，咱们先去看看这些标签啊，参考咱们的对应的课件啊，去看看这些标签，呃，咱们C开头的标签啊，Time life当中咱们可以使用，呃，C冒号啊，相关。

的标签，那后面就是它对应的属性了啊，可以根据不同属性实现不同的功能啊，比如说咱们去看一下哎这个，比如说哎后面我对接上什么guest，这通过命名各位也能猜出来，在我这标签里面内容呢，诶这个你没有登录也能展现，也能去读取它啊这就是咱们的游客身份访问的时候能看到内容，那再往后呢，哎，S后面冒号什么的user啊很显然你得先什么呢？经历过身份验证，或者哎你选择remember me啊记住我，哎这个之后啊，登录之后哎才能显示的内容啊这两个都覆盖到了，那还有再往后啊，咱们的什么呢？哎在这儿啊，咱们再往后呢，是ALL3D啊，咱们对应的什么呢？认证通过之后，哎显示的内容，但是这块呢，诶，只只是啊，这个针对什么，咱们的subject.login登录成功之后啊，不包括remember me，那不包括记住我登录，哎，如果你什么呢？哎不是直接这种登录，而是。

保存了你用户信息通过remember me登录的话，诶，咱们这个标签里面内容也是看不到的啊，可这块需要咱们确认好，那再往后呢，诶，就是在这儿啊，咱们可以看到啊，这个没有经过认证啊，什么意思啊，你说老师是不是没登录，没经过登录认证也能访问，那不是跟游客差不多了吗？各位不是啊，这块一定要注意啊，哎，用户已经身份验证通过了，但是没有调用咱们的subject login什么意思，就是remember me啊，就是哎只要什么呢？哎，咱们啊，这个没有进行登录认证，但是你有remember me啊，可以通过咱们这个相关的标签展示出来，跟咱们的游客访问标签还是不一样的，所这块要知道这个标签之间的一个区别好了，再往后呢，就是咱们的，哎，这个相关的PAL啊，这个身份的这个标签啊，PP，咱们这块也是进行验证，就是诶咱们判断一下啊，是否是啊这个某个用户啊，咱们进行一个判断好暂后啊咱们的like啊。

Per啊，Permission啊，Like permission啊，这块进行个校验，就是当前这个标签下什么的，哎，咱们的如果当前的subject没有权限啊，显示这个标签里面内容啊，你没有什么权限可以显示出来，比如说在这块来个提示信息啊，啊，当前你没有相关权限啊，请申请这个相关权限啊，或者一些内容啊，这块呢，没有权限的时候显示的内容，那再往后has死roll啊，通过这个对应的标签名，各位也能猜出来这什么。诶，是否拥有该角色啊，如果什么的，哎，有该角色，比如说你有ain相关的角色才能看到这个标签里面的内容啊，这是啊，哎，判断一下有没有该什么的这个角色啊，如果有才能显示，那再往后呢，哎，Has any RO啊，什么意思呢？哎，你这块就不是单独一个角这个角色了，这一堆角色啊，只要其中有任意一个就是啊，你任意一个，哎，只要有任意一个角色就能显示这个标签里面的内容啊，这块的一个是单独一个，一个是一堆啊，咱们一个集合，只要你有一个就可以，好了，继续再往下，Alex row啊，这块什么呢？哎，你没有什么角色啊，没有这个对应的角色可以显示内容啊，这是啊，咱们对应的标签还是很灵活的，各种情况它都覆盖到了，还有判断什么呢？诶如果哎判断是否有相关的什么的权限啊，这个可以控制的更细节一些啊这块呢，诶比如说你没有这个创建。

Create相关的权限你就没办法新增啊，你没有delete权限你就看不到，诶这个咱们对应的这个删除按钮啊，这块呢，诶以以此类推啊，各位咱们看一下诶，是否有相关的权限，有权限显示，没权限不显示啊，这是咱们对应的什么呢？了解一下这些标签啊，把这些标签咱们做一个基础了解之后呢，诶，咱们改造一下慢点HTML啊，咱们去把这个标签添加上啊，加上这个标签校验，咱们再去看看效果好，咱们改造慢点H3L啊，在这儿添加相关的标签啊，咱们选择的标签就是一个是来判断下有没有相关的角色，另外一个判断有没有相关的权限啊，咱们进行判断，那在这儿啊，咱们去添加相关的标签属性就是咱们的sir。

Sir，然后呢，冒号，哎，咱们去进行判断，但这块呢，哎，很显然咱们需要前端的一些依赖啊，这块的快捷键咱们去导入一下，往上翻啊，在这儿可以看到，哎，相关的依赖添加进来，然后之后呢，继续再往下，哎，咱们去写一下啊，咱们用到什么是has，判断下有没有相关的角色。哎，判断一下有没有相关角色，哎，什么角色呢？咱们之前啊，在咱们写的那个接口那块已经写的很清楚了，咱们去看那个controller controller，哎，咱们对应的验证方法里面有没有什么角色是吧？啊的in角色对吧，咱们判断一下是否有啊的in角色，如果有的话，哎展现，如果没有的话不展现啊，这是咱们的，哎实有标签那这块呢，除了它，咱们再去判断一下是不是有没有相关的，直接拿它改吧，哎，有没有相关的什么的，哎，这个权限啊在。

对应课件啊，对应的标签就是它has啊，咱们的permission啊，看一下有没有相关的权限直接替换过来。进到这个相关的页面啊，判断一下有没有相关的权限啊，这块咱们权限是什么，也是跟咱们的controller对应上，哎在这诶你有没有user冒号什么的delete权限啊，有没有，哎，如果有展现没有不展限啊，这是要通过标签咱们去判定一下，哎把它添加上以后，咱们再次启动工程测试一把，看到底好用不好用啊，跑友起来。好，服务已经启动起来了，还是当前的登录页面，咱们登录一下，诶，选择张三啊，这张三所有权限全有啊，咱们去测试一把密码还是Z3啊，这个直接登录。

咱们看到是不是都显示出来了，对吧，咱们登出再测一下谁李四，李四好像没有任何权限对吧，咱们测试一把李四还是输入密码，然后咱们登录一把，各位是不是不显示啊，诶所见即所得诶你没有权限，我页面上根本不给你显示相关功能啊，这样用户体验更好。