vue点击退出按钮退出登录,跳转到登录页面实现

博客介绍了在后台管理页面中实现简单退出登录跳转登录页面的方法。在Vue登录页面绑定点击事件,在method方法中写入该事件,使用localStorage.clear()清除用户名密码,再用window.sessionStorage.clear()清除缓存,确保未登录时无法直接通过地址栏访问项目页面。

在写后台管理页面时会有登录退出功能,这里讲一个很简单的退出登录跳转登录页面,并需要重新输入账号和密码登录

在登录的vue页面中,给需要的标签绑定点击事件

<div class="quit" @click="endOut"></div>

在method方法中,写入该点击事件


      endOut() {
              // localStorage.clear()清除上次登录用户名密码,若此时在地址栏输入项目网址相关页面,仍可以进入项目页面中,故加了下一行
			  localStorage.clear()
			  //加入该行后会清除缓存,当点击退出按钮后,会清除登录信息缓存
			  window.sessionStorage.clear()
			  this.$router.push('/login')
		},

localStorage.clear()清除上次登录用户名密码,若此时在地址栏输入项目网址相关页面,仍可以进入项目页面中,故加了下一行

window.sessionStorage.clear()

加入该行后会清除缓存,当点击退出按钮后,会清除登录信息缓存,然后跳转至登录页面,此时在未登录的情况下,再次在地址栏输入项目网址相关页面便不会直接跳转,会仍在当前页面,需要登录。

Vue 3 中实现一个带有登录和登功能的下拉菜单按钮,可以使用 `Element Plus` 提供的 `<el-dropdown>` 组件来构建下拉菜单结构,并通过 Vue 的响应式数据管理用户的登录状态。以下是一个完整的实现方案。 ### 实现步骤 1. **创建用户状态**:使用 `ref` 或 `reactive` 来维护用户的登录状态。 2. **构建下拉菜单结构**:使用 `<el-dropdown>` 和 `<el-dropdown-menu>` 来展示菜单项。 3. **处理登录与登逻辑**:通过击事件更新用户状态并执行相关操作(如跳转页面、清除 token 等)。 ### 示例代码 ```vue <template> <div class="user-dropdown-container"> <el-dropdown @command="handleCommand" trigger="click"> <span class="el-dropdown-link"> <img v-if="isLoggedIn" :src="avatarUrl" class="user-avatar" /> <span v-if="isLoggedIn">{{ username }}</span> <span v-else>未登录</span> <i class="el-icon-arrow-down el-icon--right"></i> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-if="isLoggedIn" command="logout">退出登录</el-dropdown-item> <el-dropdown-item v-else command="login">登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); // 用户状态 const isLoggedIn = ref(false); // 是否已登录 const username = ref('管理员'); // 默认用户名 const avatarUrl = ref('@/assets/common/bigUserHeader.png'); // 头像地址 // 登录/登操作 const handleCommand = (command) => { if (command === 'login') { // 模拟登录逻辑 isLoggedIn.value = true; console.log('用户已登录'); } else if (command === 'logout') { // 模拟登逻辑 isLoggedIn.value = false; username.value = ''; console.log('用户已登'); router.push('/login'); // 跳转登录页 } }; </script> <style scoped> .user-dropdown-container { display: inline-block; cursor: pointer; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; margin-right: 8px; } .el-dropdown-link { font-size: 14px; color: #606266; } </style> ``` ### 关键说明 - 使用 `isLoggedIn` 控制显示登录或登选项。 - 通过 `handleCommand` 方法统一处理命令逻辑,简化代码结构。 - 在样式部分对头像和文字进行了简单美化,使其更贴近实际 UI 需求。 - 支持动态绑定头像路径和用户名,便于后续扩展。 --- ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值