A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马