13-用户退出-前端

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、点击退出
解决bug

还是不行



退出失败，重启服务