vue 后台管理系统-登录组件-退出登录

川长思鸟来 2023-01-07 13:23 164阅读 0赞

1.`router/index.js`

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../components/Login.vue'
    import Home from '../components/Home'
    Vue.use(VueRouter)
    
    const routes = [
      {  path: '/', redirect: '/login' },
      {  path: '/login', component: Login },
      {  path: '/home', component: Home }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    router.beforeEach((to, from, next) => { 
      // to 将要访问的路径 from 代表从哪个路径跳转而来 next 是一个函数，表示放行
      // next() 放行 next('/login') 强制跳转
      if (to.path === '/login') return next()
      const tokenStr = window.sessionStorage.getItem('token')
      if (!tokenStr) return next('/login')
      next()
    })
    
    export default router

2.`components/Home.vue`

<template>
      <div>
        <el-button type="info" @click="logout">退出</el-button>
      </div>
    </template>
    
    <script> export default { methods: { logout () { window.sessionStorage.clear() // 清空token this.$router.push('/login') // 返回登录页面 } } } </script>
    
    <style lang="less" scoped> </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 eladmin 后台管理 -- 登录

[授权路径][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0...

落日映苍穹つ/ 2024年04月20日 08:07/ 0 赞/ 88 阅读

相关瑞吉外卖——后台系统登录与退出功能

目录一、登录功能 1.1 思路 1.2 代码 1.3 完善登录功能——过滤器 -------------------- 一、登录功能 1.1 思路

逃离我推掉我的手/ 2024年03月24日 16:48/ 0 赞/ 94 阅读

相关登录VMware管理组件

登录VMware管理组件，本文描述了用户如何通过ECS跳板机（Windows操作系统）访问和登录专属VMware环境。前提条件完成专属VMware环境的创

素颜马尾好姑娘i/ 2023年09月24日 23:51/ 0 赞/ 47 阅读

相关 vue 后台管理系统-登录组件-退出登录

1.`router/index.js` import Vue from 'vue' import VueRouter from 'vue-router'

川长思鸟来/ 2023年01月07日 13:23/ 0 赞/ 165 阅读

相关 vue 退出登录

<el-button type="info" size="mini" @click="logout">退出</el-button> methods: {

秒速五厘米/ 2022年11月10日 14:15/ 0 赞/ 293 阅读

相关 vue后台登录界面

他的界面是这样的然后判断界面设置账户密码判断登录错误界面是这样的登陆成功界面是这样的以上就是我简单的登录界面转载于:ht

客官°小女子只卖身不卖艺/ 2022年10月01日 04:58/ 0 赞/ 53 阅读

相关退出登录

html <a href="/signOut">退出</a> 默认实现 ![在这里插入图片描述][70] ![在这里插入图片描述][70 1] 退出

快来打我*/ 2022年05月09日 10:26/ 0 赞/ 295 阅读

相关个人简历管理系统（12）- 退出登录

个人简历管理系统- 退出登录文件结构 loginout.jsp 备注文件结构 ![文件结构][watermark_type_ZmFuZ3po

不念不忘少年蓝@/ 2022年01月05日 02:36/ 0 赞/ 392 阅读

相关登录退出

// 开发说明大致步骤 // 如何监听登录注册通过events 插件定义事件 // 编写一个中间界面在这里判断是否存在登录的信息如果存在信息，则保持登录，否则重

约定不等于承诺〃/ 2021年09月08日 15:18/ 0 赞/ 495 阅读

相关 Springboot信息管理系统——后台登录功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年07月25日 20:20/ 0 赞/ 406 阅读