JavaScript系列—用户登录退出cookies—vue版

这篇文章我们结合vue和vue-router来说一下如何实现用户的登录，退出，和cookies

先回忆一下之前《vue-router—14案例：模拟登录跳转》这篇文章

1. vue-router—14案例：模拟登录跳转

首先封装一下插件(关于为什么这么封装，为什么会有install，可以参考这篇博文https://www.cnblogs.com/mengfangui/p/9046525.html)

utils.js

/**
 * Vue的插件，用来获取和设置localStorage存储
 **/
let local = {
  save (key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  fetch (key) {
    return JSON.parse(localStorage.getItem(key)) || {}
  }
}

export default {
  install: function (vm) {
    vm.prototype.$local = local
  }
}

然后在main.js中use

 然后在router.js中全局路由钩子中判断

router.beforeEach((to, from, next) => {
  
  let b1 = to.matched.some(item => item.meta.login)
  if(b1) { // matched这个字段包含了所有的相关的节点,假如有任何一个节点有{login:true}
    // 获取到缓存里面的用户的字段
    let info = router.app.$local.fetch("miaov")
    if(info.login){ //如果是已经登录状态
      next();
    }else{  //如果是登出状态
      // 此处跳转到登录界面，并且新增加一个字段，记录用户一开始想去的路由
      router.push({
        path: '/login',
        query: {
          redirect: to.path.slice(1)
        }
      })
    }

  }else{ // matched这个字段包含了所有的相关的节点,没有任何一个节点包含login，那么就不用管了
    next()
  }
  
})

现在就到了登录界面login.vue

<template>
  <div class="login">
    <div class="login-box">
      <h2>登录</h2>
      <form @submit.prevent='sendLogin' autocomplete="off">
        <div><input placeholder="请输入用户名" type="text" name="user" ref="userInput" /></div>
        <div><input placeholder="请输入密码" type="password" name="password" /></div>
        <div class="login-btn"><input type="submit" value="一键登入" /></div>
      </form>
      <div class="back-index">
        <router-link  to="/">首页>>></router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {}
    },
    methods: {
      sendLogin () {

        // 点击登录
        let userName = this.$refs.userInput.value;
        // 向缓存中保存用户信息
        this.$local.save("miaov", {
            login: true,
            userName: userName
        })
        // 获取