3.4 front-end
3.4.1 Needs Analysis
in the user front-end engineering center ( XC-ui-PC-Learning ) to develop exit pages.
3.4.2 Api method
at the center of the project to increase user exit api method
in the base module login.js increase as follows:
/*退出*/
export const logout = params => {
return http.requestPost('/openapi/auth/userlogout');
}3.4.3 exit pages
1 , exit pages created in the user center project
reference:
2 , routing configuration
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 , exit the method
exits successfully cleared the page sessionStorage
reference logout.vue
in created hook method request method exits
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 connection to the exit page
modify include / header.html
<a href="javascript:;" @click="logout" v‐if="logined == true">退出</a>In the include / header.html add the element-ui libraries:
<script src="/css/el/index.js"></script>
将此js加到head的最下边logout follows:
logout: function () {
this.$confirm('确认退出吗?', '提示', {
}).then(() => {
//跳转到统一登陆
window.location = "http://ucenter.xuecheng.com/#/logout"
}).catch(() => {
});
},3.4.5 Test
1 , the user is logged
2 , click Exit
4 Zuul Gateway
4.1 requirements analysis
gateway acts equivalent to a worrying too much, interceptor that intercepts requests for multiple systems.
To use this section verify the user's identity gateway is legitimate.
4.2 Zuul Introduction
What is Zuul ?
Spring Cloud Zuul integration Netflflix 's Zuul micro-services gateway open source projects implemented, which implements the request routing, load balancing, the verified
consider other functions.
Official: https://github.com/Netflflix/zuul
What is a gateway?
Service gateway is arranged in front of a barrier micro-services, service request first to the gateway, a request will be misplaced, check routing process. With the service
business gateway can improve safety, legality micro gateway service verification request, the request will not be lawful interception, denied access.
Zuul and Nginx how with the use?
Zuul with Nginx need to be used in the actual project, as shown below,Nginx role is the reverse proxy, load balancing, Zuul role is to protect incognito
secure access to the service, intercepting micro service request, validate the legality and load balancing.
4.3 build Gateway project
to create a gateway project ( xc-govern-gateway ):
1 , create xc-govern-gateway project
import " data " - " xc-govern-gateway.zip
2 , @EnableZuulProxy
attention to use on startup class @EnableZuulProxy Notes identifies this project as Zuul gateway, start the class code is as follows:
@SpringBootApplication
@EnableZuulProxy
public class GatewayApplication {
public static void main(String[] args) {
SpringApplication.run(GatewayApplication.class, args);
}
}
