2023-12-26 用户退出

因为登陆/用户信息等 实例 都是在redis 获取的所以 查的时候发现有好多

image.png

注意点 逻辑步骤 清楚redis缓存

1.controller
@GetMapping(value = "/logout")
public Result<SysUser> logout(@RequestHeader(name = "token") String token) {
sysUserService.logout(token) ;
return Result.build(null , ResultCodeEnum.SUCCESS) ;
}
2.service
/**
* 根据用户退出登录
* @return
*/

void logout(String token);

2.1 serviceImpl
@Override
public void logout(String token) {
redisTemplate.delete("user:validate"+token);
}

前端

// 退出功能
export const Logout = () => {
return request({
url: '/admin/system/index/logout',
method: 'get',
})
}

image.png

<script>
import { useRouter } from 'vue-router'
import { useUserinfo } from '@/components/Avatar/hooks/useUserinfo'
import LockModal from './LockModal.vue'
import { useApp } from '@/pinia/modules/app'

import { defineComponent , getCurrentInstance} from 'vue'
import { Logout } from '@/api/login'

export default defineComponent({
components: {
LockModal,
},
setup() {
const router = useRouter()

const { userinfo } = useUserinfo()

const { proxy: ctx } = getCurrentInstance() // 可以把ctx当成vue2中的this
    
// 退出
const logout = async () => {
    const { code ,  data , message } = await Logout() ;
    if(code == 200) {
        // 清除token
        useApp().clearToken()
        router.push('/login')
    }else {
        ctx.$message.error(message)
    }

}

return {
    userinfo,
    logout,
}

},
})
</script>

image.png
image.png

验证
步骤 1.清除缓存 浏览器 和 redis的
进入登陆页面 生成验证码 user:validate

• 登陆 生成 用户 user:login
• 退出登录 回到登录页面 生成验证码 user:validate user:login 已被删除

image.png