码迷,mamicode.com
首页 > Web开发 > 详细

Vuejs实战项目三:退出系统功能实现

时间:2019-09-26 14:50:57      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:项目   方法   else   col   获取   信息   class   case   one   

1、创建Mockjs接口

method:post

url:/user/logout

描述:退出系统

response:

{
  "code": 2000, //状态码
  "flag": true,
  "message": ‘退出成功‘
}

2、在src/api/login.js中导出获取返回退出信息的函数:logout

// 获取返回的退出系统信息
export function logout(token) {
  return request({
    url: `/user/logout`,
    method: "post",
    data: {
      token   //token: token
    }
  });
}

3、在src/components/AppNavbar/index.vue中导入logout方法,并传入token信息进行清除

export default {
  methods: {
    handleDropDownClick(name) {
      switch (name) {
        case ‘a‘:
          // 修改密码
          this.$message(`点击修改密码`);
          break;
        case ‘b‘:
          // 退出系统
          // token为登录时保存的信息
          // 先获取保存的用户信息
          // localStorage.getItem("msm-user");
          // localStorage.getItem("msm-token");
          logout(localStorage.getItem(‘msm-token‘)).then(response => {
            // 接收返回的数据
            const resp = response.data;
            if (resp.flag) {
              // 退出成功
              // 清除本地用户数据
              localStorage.removeItem("msm-user");
              localStorage.removeItem("msm-token");
              // 回到登录页面
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
                duration: 2000  // 弹出停留时间
              });
            }
          });
          break;

        default:
          break;
      }
    }
  }
};

 

Vuejs实战项目三:退出系统功能实现

标签:项目   方法   else   col   获取   信息   class   case   one   

原文地址:https://www.cnblogs.com/flypig666/p/11590603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!