最近在写vue项目的时候，把登录的用户信息放在Vuex（store）中，但只要页面一刷新，登录时存入Vuex（store）的数据就被清除了，为解决这一问题，我决定将用户登录信息存入cookie中。

注意：cookie只能存储非常小的数据，大量的数据可存储于localstorage中

安装插件

使用cookie前，需要安装相应的插件，localstorage无需安装插件

npm install js-cookie --save

封装方法

新建/src/utils/cookie.js (文件夹和文件名可根据自己的习惯命名)

import cookie from 'js-cookie'    //导入插件

export function getCookie(key) {
    
       //获取，key为要获取的cookie
  return cookie.get(key)
}

export function setCookie(key, data) {
    
       //设置，key为要设置的cookie名，data为对应的值
  return cookie.set(key, data)
}

export function removeCookie(key) {
    
         //删除，key为要删除的cookie
  return cookie.remove(key)
}

新建/src/utils/storage.js

export function getStorage(key) {
    
    
  return JSON.parse(localStorage.getItem(key))   //JSON.parse()用于解析Json字符串
}

export function setStorage(key, data) {
    
    
  localStorage.setItem(key, JSON.stringify(data))   //JSON.stringif()用于将JS对象转换为JSON字符串
}

export function removeStorage(key) {
    
    
  localStorage.removeItem(key)
}

实战

此实战案例是在vue+mysql实现登录案例的基础上构建的，有需要请自行移步

Vuex（store）

import Vue from 'vue'
import Vuex from 'vuex'
import {
    
     getCookie, removeCookie, setCookie } from '../utils/cookie'   //导入对应方法
import {
    
     getStorage, removeStorage, setStorage } from '../utils/storage'

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    username: getCookie('username'),
    info: getStorage('info')
  },
  mutations: {
    
    
    setCookie(cookie) {
    
    
      setCookie(cookie.key, cookie.data)
    },
    removeCookie(key) {
    
    
      removeCookie(key)
    },
    setStorage(storage) {
    
    
      setStorage(storage.key, storage.data)
    },
    removeStorage(key) {
    
    
      removeStorage(key)
    }
  }
})

对于Vuex（store）方法定义、方法调用、参数传递等知识不了解的，可参考这里，或自行去找文章或视频学习，这里不做赘述，直接使用了

登陆页面

输入用户名和密码，登陆成功时，将用户名存入cookie

<template>
  <div class="bg">
    <div id="login">
        <h2>登录页面</h2>
        <el-form ref="form" :model="form" label-width="20%">
        <el-form-item label="用户名:">
            <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密  码:">
            <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        </el-form>
        <el-button type="primary" round @click="login" class="btn">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
      
      
  data () {
      
      
    return {
      
      
      form: {
      
      
        username: '',
        password: ''  
      }
    };
  },

  methods: {
      
      
    login() {
      
      
      this.axios.get('/login', {
      
      
        params: {
      
      
          name: this.form.username,
          password: this.form.password
        }
      }).then(res=>{
      
      
          if(res.data.status == 200) {
      
      
            this.$store.commit({
      
         //调用vuex（store）中的setCookie，将cookie名和值传入，将用户名存入cookie
              type: 'setCookie',
              key: 'username',
              data: this.form.username
            })
            this.$store.commit({
      
          //将用户登录信息存入localstorage（一般是不会将这种数据存入localstorage的，此处只是做个使用示范）
              type: 'setStorage',
              key: 'info',
              data: this.form
            })
            this.$router.push('/home')   //页面跳转
          }else{
      
      
            this.$alert('用户名或密码错误', '登录失败', {
      
      
              confirmButtonText: '确定',
              callback: action => {
      
      
                this.form.username = '',
                this.form.password = ''
              }
            });
          }
      }).catch(err=>{
      
      
          console.log("登录失败" + err);
      })
    }
  }
}
</script>

首页

<template>
  <div id="home">
  	<h2>欢迎：{
   
   {username}}</h2>
    <a @click="out">退出登录</a>
  </div>
</template>

<script>
  export default {
      
      
    name: 'home',
    data() {
      
      
      return{
      
      
        username: ''
      }
    },
    methods: {
      
      
      out() {
      
      
        this.$store.commit('removeCookie', 'username')  //调用vuex（store）中的removeCookie，将cookie名传入删除
        this.$store.commit('removeStorage', 'info')    //将info从localstorage删除
        this.$router.push('/login')   //页面跳转至登录页面
      }
    },
    created() {
      
      
      this.username = this.$store.state.username    //页面创建，从vuex（store）获取用户名
    },

  }
</script>

效果演示

这样，即使页面刷新，数据也不会被清除了。