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',
[AppleScript] 纯文本查看 复制代码 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、点击退出
| 
收藏
淘帖
踩
