Vue2-黑马（十三）

目录：

（1）实战-permissions.js-动态路由

（2）实战-第三方登录-流程分析

（3）实战-第三方登录-代码解读

---

（1）实战-permissions.js-动态路由

在做根据用户角色动态生成路由：

 动态生成路由和菜单我们前面已经讲过，但是我们这个框架跟前面将的不一样的，对应的代码：

我们以前用户的路由信息和菜单信息是存在用户的一张表里，，我们直接把它查出来，返回给前端，前端直接用了就可以啦，现在这个是，数据库只存储了用户对应什么角色，路由信息并不是存在数据库里，路由信息还是保存在前端 ，有前端管理

 

 上面是基本的路由：首页，文档，引导页，大家都能看到的

还有一些是跟权限有关的所有路由：

 meta：路由的一些额外信息：roles：指定角色

 

 

 上面是把所有的路由信息保存在客户端啦，服务器呢，只给你返回角色，然后再根据角色去筛选你这个显示的路由

使用admin用户会看到所有菜单：

admin可以看到所有的菜单： 

 张三用户是edit：对应的路由

 都能看到的路由：hidden属性：表明会不会在菜单中展示出来，比如登录、404、404呀这些鱼油不会子啊压面展示出来

根路径：主页：/  没有hiden属性，所以需要在主页展示出来   文档： /documentation 也没有hidden  会在显示

 

 

 （2）实战-第三方登录-流程分析

这里我们没有使用微信，因为微信认证通过，需要重定向后端服务器地址，这个地址是一个公网的地址。为了减轻麻烦，我们选用码云和Github，它俩不要求地址是公网的

通过地方方登录，可以减轻登录门槛         

点击码云：

点击授权，会从gitee登录后重定向后台的8080服务器上，跳转是使用了浏览器的重定向方式进行跳转，第三方服务器在重定向的时候，携带一个参数叫做code，后端复服务器收到code值，就会知道在gitee上完成登录，然后会调用gitee的api获取用户的信息，比如说用户名是什么，头像等等

 访问gitee需要先获取那端tocken，然后通过access_tocken才能正确访问获取信息

 （3）实战-第三方登录-代码解读

登录按钮：@click=“showDialog=true”把属性改为true

 登录框：sync：作用是把对话框改为false

 

 social-sign：引入新组件，引入，作为component组件进行注册

 组件页面：自定义组件SocialSignin

 首先需要建立8080根gitee的信任关系，返回一个client_server

点击设置 

 选择第三方应用

 创建第三方应用：

 

 

创建成功后生成：

client ID：在码云上的唯一标识

Client Sercet：配合code获取访问令牌

 前端的访问：

点击授权gitee就会授权通过，跳转到后台8080：使用HttpClient发送请求。

 

 

 

 

 把信息保存在自己的数据库中一份，并生成JWT令牌返回传给9527前端

 gitee返回用户信息后，后端8080，再生成一个新的tocken工前端使用，并传送给前端

新窗口发送老窗口的tocken的代码：

发送时会产生跨域问题，怎么解决？加一个参数地址

 

 

 前端页面的收到消息代码：

data：包含可tocken 

 

 前端获取到tocken之后进行存储，跳转到首页，window.location  ：获取地址栏对象