Reggie外卖项目 —— 后台系统退出功能

04、后台退出功能开发

4.1、需求分析

员工登录成功后，页面跳转到后台系统首页面（backend/index.html），此时会显示当前登录用户的姓名；

如果员工需要退出系统，直接点击右侧的退出按钮即可退出系统，退出系统后页面应跳转回登录页面

4.2、代码开发

4.2.1、页面开发

【index.html】

</div>
<div class="right-menu">
  <div class="avatar-wrapper">{{ userInfo.name }}</div>
  <!-- <div class="logout" @click="logout">退出</div> -->
  <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
</div>

logout() {
  logoutApi().then((res)=>{
    if(res.code === 1){
      localStorage.removeItem('userInfo')
      window.location.href = '/backend/page/login/login.html'
    }
  })
},

【login.js】

function logoutApi(){
  return $axios({
    'url': '/employee/logout',
    'method': 'post',
  })
}

4.2.2、后端开发

用户点击页面中退出按钮，发送请求，请求地址为/employee/logout，请求方式为post。

只需要在controller中创建对应的处理方法即可，具体的处理逻辑：

1、清理session中的用户id

2、返回结果

4.3、功能测试

/**
 * 员工退出
 * @param request
 * @return
 */
@PostMapping("/logout")
public R<String> logout(HttpServletRequest request) {
    //1、清理session中保存的当前登录员工的id
    request.getSession().removeAttribute("employee");
    return R.success("退出成功");
}