3.4 前端
3.4.1 需求分析
在用户中心前端工程（xc-ui-pc-learning）开发退出页面。
3.4.2 Api方法
在用户中心工程增加退出的api方法
在base模块的login.js增加方法如下：
/*退出*/
export const logout = params => {
return http.requestPost('/openapi/auth/userlogout');
}3.4.3退出页面
1、在用户中心工程创建退出页面
参考：
2、路由配置
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钩子方法请求退出方法
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
<a href="javascript:;" @click="logout" v‐if="logined == true">退出</a>在include/header.html中添加element-ui库：
<script src="/css/el/index.js"></script>
将此js加到head的最下边logout方法如下：
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网关，启动类代码如下：
@SpringBootApplication
@EnableZuulProxy
public class GatewayApplication {
public static void main(String[] args) {
SpringApplication.run(GatewayApplication.class, args);
}
}