Vue通过登录状态控制导航栏的显示

最新推荐文章于 2023-01-07 00:16:36 发布

沃特艾文儿～

最新推荐文章于 2023-01-07 00:16:36 发布

阅读量1.3k

点赞数 5

分类专栏：前后端开发小技巧以及经验 Vue 文章标签： vue javascript 导航栏状态控制

本文链接：https://blog.csdn.net/qq_44614115/article/details/114265113

版权

前后端开发同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

小技巧以及经验

51 篇文章 2 订阅

订阅专栏

Vue

24 篇文章 0 订阅

订阅专栏

在实际网页开发中的导航栏会根据不同的状态来显示。这里就简单的实现一下，这里没有用到数据监听watch，mounted之类的，所以说比较简单。

未登录状态导航栏

在这里插入图片描述

已经登录状态

这里随便给出一个已经登录的状态导航栏
$ra-user-images\image-20210301155505485.png?lastModify=1614586287)]$

实现

就是用了简单的v-if 来判断，根据是否可以从sessionstorage获取到token。这地方不太明白的同学可以参考这篇文章------>传送门

代码

HTML

      <div class="right menu" v-if="!verifyLogin()">
        <a class="ui item " id="register" href="../register/">
          Register
        </a>
        <a class="ui item" id="login" href="../login/">
          Login
        </a>
      </div>
      <div class="right menu exit" v-else>
        <div class="ui small image" style="width: 90px;">
          <img src="../assets/avatar_1569504708.png" onmouseover="overSelectItem()">
        </div>
        <!--        <el-button @click="onExit">退出登录</el-button>-->
      </div>

export default {
methods: {
    verifyLogin() {
      let check = sessionStorage.getItem('token')
      console.log(check)
      return check
    }
}
}

检查的时候都会之间这个函数来获取token，这样就不会是静态常量的了。