【华夏OA项目实战】3-6 实现登出MIS系统，销毁同端互斥Token

本课程开发软件与项目初始代码可以通过云盘下载，答疑服务可以关注视频片头的二维码获取。
https://www.123912.com/s/A75eVv-27mod，提取码：yton

教学视频

上节课我调试成功了登录OA系统，这节课我们来完成用户退出登录，其中包含了前后端代码，代码量并不多，很容易实现。

大家认真观看视频，不要快进。有些操作只在视频中演示，只对着手册操作并不能完成案例，切记！

一、编写hxoa-mis子系统

在com.example.hxoa.cloud.mis.controller包UserController.java类中，声明Web方法。

@RestController
@RequestMapping("/user")
public class UserController {
    ……
    @GetMapping("/logout")
    @SaCheckLogin
    @SentinelResource("UserController.logout")
    public R logout() {
        long userId = StpUtil.getLoginIdAsLong();
        StpUtil.logout(userId, "Web");
        return R.ok();
    }
}

二、编写hxoa-vue项目

在index.vue页面中找到退出登录按钮，该按钮绑定了点击事件。

<el-dropdown-menu>
    <el-dropdown-item @click="showResetPhotoDialog()">修改头像</el-dropdown-item>
    <el-dropdown-item @click="showResetPasswordDialog()">重置密码</el-dropdown-item>
    <el-dropdown-item @click="logout">退出</el-dropdown-item>
</el-dropdown-menu>

创建logout()回调函数，实现退出登录功能。

function logout() {
    proxy.$http('/mis/user/logout', 'GET', null, true, resp => {
        if (resp.code === '200') {
            localStorage.clear();
            router.push('/login');
        }
    })
}