前端学习（十一）导航栏登录功能

一般网站的右上角，都是一个用户登录的按钮，用户登录完就显示用户的头像，点击进去就是个人中心。本文就为实现这个功能。

组件实现

在右上角添加这么个模块，他实现的效果是下面这样的，
这是没登录时的样子：

这是登录后的效果：

当然以后如果有头像了，把这个图标换成头像就更生动了
首先就把这个视图的功能先写出来：
我新建了个文件“src\views\login\menuLoginBar.vue”：

<template>
  <el-dropdown style="float: right">
    <div>
      <router-link v-if="!getLoginStatus()" to="/login" style="color: white">登录</router-link>
      <i v-if="getLoginStatus()" class="el-icon-user-solid" style="color: white">
        <el-dropdown-menu>
          <el-dropdown-item>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </i>
    </div>
  </el-dropdown>
</template>

<script>
import storageUtil from "../../utils/storageUtil"

export default {
  name: "loginView",
  data() {
    return {
      msg: this.getLoginStatus()
    }
  },
  methods: {
    getLoginStatus() {
      if (!window.localStorage) {
        alert("浏览器不支持localstorage，请更换更高版本的浏览器")
        return false
      } else return storageUtil.get("isLogin") != null;
    }
  }
}
</script>

这里用到el-dropdown，就是实现那个鼠标移动到这个弹出下面的选项。

      <router-link v-if="!getLoginStatus()" to="/login" style="color: white">登录</router-link>
      <i v-if="getLoginStatus()" class="el-icon-user-solid" style="color: white">

看这两行，第一行是未登录时显示的，第二行是登录时显示的，他们切换显示靠的是v-if=“getLoginStatus()”，getLoginStatus()这个方法就是查询是否登录了，之后再具体讲。

el-dropdown-menu就是下拉菜单的子菜单项。基本功能就这么些。

引入到导航栏

      <el-menu-item style="float: right">
        <menuLoginBar></menuLoginBar>
      </el-menu-item>

这个好办，就在导航栏代码里新增一个子模块就可以了。
当然也要先导入模块：

<script>
import menuLoginBar from "@/views/login/menuLoginBar";

export default {
  name: 'App',
  components: {menuLoginBar}
}
</script>

查询登录状态

一般网站登录后都是会保持一段时间的登录状态的，即使关闭页面再打开登录状态也还在，这样减少用户登录的次数，会方便很多，这个取决于业务。
那么如何做呢？就是使用localStorage，做一个本地存储，但是localStorage是不会过期的，除非人为删除他，所以得对他进行封装，给他添加一个过期功能。
所以我还新增了一个工具类：

let storageUtil =  {
    set : function (key, value, expiredM) {
        /**
         * set 带过期时间的存储方法
         * @ param {String}     key 键
         * @ param {String}     value 值，
         * @ param {String}     expired 过期时间，以分钟为单位
         */
        let expiredTime = Date.now() + expiredM * 60000
        let item = {
            value: value,
            expired: expiredTime
        }
        let itemStr = JSON.stringify(item)
        localStorage.setItem(key, itemStr)
    },

    get :function (key) {
        /**
         * get 获取方法,须与set配套使用
         * @ param {String}     key 键
         */
        let valueStr=localStorage.getItem(key)
        if (valueStr!=null){
            let item=JSON.parse(valueStr)
            if (Date.now()>=item.expired){
                localStorage.removeItem(key)
                return null
            }else {
                return item.value
            }
        }else {
            return null
        }
    }
};
export default storageUtil;

我就不具体讲了，这些工具类网上一搜大把。
在有了工具类之后，在登录界面（之前文章里已实现），就得添加登录成功后持久化存储登录状态的语句：

storageUtil.set("isLogin",true,30)

这里就不展开讲了，其实这里要学习的是怎么添加工具类，以及怎么引用它。可以以我这个工具类为模板把，然后引用就：

import storageUtil from "@/utils/storageUtil"

功能改进

以上实现还存在问题，就是未登录时点击登录，登录成功之后，会自动跳转到首页，但是右上角这个状态他不会改变，因为没刷新，它没有重新判断当前的登录状态，手动刷新一下页面即可更新。
但是我们想要的效果肯定不能是这样的，所以当我们主动发生登录状态变更的时候（被动就不需要考虑了，比如登录信息过期），比如手动登录，手动退出登录时。

PS：篇幅和时间原因，代码贴的不完整，想看具体的代码去：https://gitee.com/lsjWeiYi/vue-frame，不过这里的代码也不完全和博客上的一模一样，后面可能我有做更改。