代码开源地址
退出登录后端
@GetMapping("/logout") public ApiResult logout() { return ApiResult.success(null, "注销成功"); }
退出登录前端
1.修改src\store\modules\user.js
已添加,看看就行
2.API接口
src\api\auth\auth.js添加注销接口
// 注销 export function logout() { return request({ url: '/auth/user/logout', method: 'get' }) }
3.测试问题
当在首页退出登录,报下面这个问题(可以正常退出)
4.解决
在src\router\index.js添加
const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); };
底部(前端)
1.src\components\创建Backtop\BackTop.vue
<template> <el-backtop :bottom="60" :right="60"> <div title="回到顶部" style="{ height: 100%; width: 100%; background-color: #f2f5f6; box-shadow: 0 1px 0 0; border-radius: 12px; text-align: center; line-height: 40px; color: #167df0; }" > <i class="fa fa-arrow-up"></i> </div> </el-backtop> </template> <script> export default { name: "BackTop" } </script> <style scoped> </style>
2.src\components\Layout创建\Footer.vue
<template> <footer class="footer has-text-grey-light has-background-grey-darker"> <div class="container"> <div class=""> <span>简洁、实用、美观</span> <span style="float: right"> <router-link :to="{path:'/admin/login'}"> 管理员登录 </router-link> | <a href="/?lang=zh_CN">中文</a> | <a href="/?lang=en_US">English</a> </span> </div> <div> <span>{{ title }} ALL RIGHTS RESERVED</span> <div style="float: right"> <template> <b-taglist attached> <b-tag type="is-dark" size="is-normal">Design</b-tag> <b-tag type="is-info" size="is-normal">{{ author }}</b-tag> </b-taglist> </template> </div> </div> </div> <back-top></back-top> </footer> </template> <script> // 回到顶部 import BackTop from "@/components/Backtop/BackTop"; export default { name: "Footer", components: { BackTop }, data() { return { title: "© " + new Date().getFullYear() + ' 豆约翰', author: '豆约翰', }; }, }; </script> <style scoped> footer { margin-top: 120px; height: 150px; } footer a{ color: #bfbfbf; } </style>
3.App.vue