黑马程序员技术交流社区

标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 五 [打印本页]

---

作者: 我是楠楠    时间: 2020-1-8 15:36
标题: 【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 五

【郑州校区】学成在线-第17天-讲义-用户认证 Zuul 五

3.4 前端
3.4.1 需求分析
在用户中心前端工程（xc-ui-pc-learning）开发退出页面。
3.4.2 Api方法
在用户中心工程增加退出的api方法
在base模块的login.js增加方法如下：

[AppleScript] 纯文本查看 复制代码

 /*退出*/

export const logout = params => {

return http.requestPost('/openapi/auth/userlogout');

}

3.4.3退出页面
1、在用户中心工程创建退出页面
参考：


2、路由配置

[AppleScript] 纯文本查看 复制代码

 import Logout from '@/module/home/page/logout.vue';

import order_pay from '@/module/order/page/order_pay.vue';

// import LoginMini from '@/module/home/page/login_mini.vue';

export default [{

path: '/',

component: Home,

name: '个人中心',

hidden: true

},

{

path: '/login',

component: Login,

name: 'Login',

hidden: true

},

{

path: '/logout',

component: Logout,

name: 'Logout',

hidden: true

},

....

3、退出方法
退出成功清除页面的sessionStorage
参考logout.vue
在created钩子方法请求退出方法

[AppleScript] 纯文本查看 复制代码

 created(){

loginApi.logout({}).then((res) => {

if(res.success){

sessionStorage.removeItem('activeUser');

this.$message('退出成功');

this.logoutsuccess = true

}else{

this.logoutsuccess = false

}

},

(res) => {

this.logoutsuccess = false

});

}, 

3.4.4连接到退出页面
修改include/header.html

[AppleScript] 纯文本查看 复制代码

 <a href="javascript:;" @click="logout" v‐if="logined == true">退出</a> 

在include/header.html中添加element-ui库：

[AppleScript] 纯文本查看 复制代码

 <script src="/css/el/index.js"></script>

将此js加到head的最下边 

logout方法如下：

[AppleScript] 纯文本查看 复制代码

 logout: function () {

this.$confirm('确认退出吗?', '提示', {

}).then(() => {

//跳转到统一登陆

window.location = "http://ucenter.xuecheng.com/#/logout"

}).catch(() => {

});

}, 

3.4.5 测试
1、用户登录成功
2、点击退出
4 Zuul网关
4.1 需求分析
网关的作用相当于一个过虑器、拦截器，它可以拦截多个系统的请求。
本章节要使用网关校验用户的身份是否合法。
4.2 Zuul介绍
什么是Zuul？
Spring Cloud Zuul是整合Netflflix公司的Zuul开源项目实现的微服务网关，它实现了请求路由、负载均衡、校验过
虑等 功能。
官方：https://github.com/Netflflix/zuul
什么是网关？
服务网关是在微服务前边设置一道屏障，请求先到服务网关，网关会对请求进行过虑、校验、路由等处理。有了服
务网关可以提高微服务的安全性，网关校验请求的合法性，请求不合法将被拦截，拒绝访问。
Zuul与Nginx怎么配合使用？
Zuul与Nginx在实际项目中需要配合使用，如下图，Nginx的作用是反向代理、负载均衡，Zuul的作用是保障微服
务的安全访问，拦截微服务请求，校验合法性及负载均衡。


4.3 搭建网关工程
创建网关工程（xc-govern-gateway）：
1、创建xc-govern-gateway工程
导入“资料”--》xc-govern-gateway.zip
2、@EnableZuulProxy
注意在启动类上使用@EnableZuulProxy注解标识此工程为Zuul网关，启动类代码如下：

[AppleScript] 纯文本查看 复制代码

 @SpringBootApplication

@EnableZuulProxy

public class GatewayApplication {

public static void main(String[] args) {

SpringApplication.run(GatewayApplication.class, args);

}

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2