在vue中使用vuex和session Storage保存用户登录状态

1.安装vuex

        使用npm包管理工具来安装 Vuex，命令格式如下所示：

npm install vuex --save

        在命令中加上-save是因为这个包需要在生产环境中使用

更多安装方式请参考：Vuex 安装

2.安装完成后构建如下目录 

        vuex的目录结构：  

         

• actions => 像一个装饰器，包裹mutations，使之可以异步。
• getters => 从基本数据派生的数据  
• mutations => 提交更改数据的方法，同步！      
•  store => 核心仓库   

  01.创建store.js文件

              每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着应用中大部分的状态 (state)，state即Vuex中的基本数据并且它应该是唯一的

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from'./getters'
import * as mutations from'./mutations'
import * as actions from'./actions'
Vue.use(Vuex);

const store = new Vuex.Store({
  //存储用户登录信息的一个状态
  state:{
    userName:null,//当前用户
    roleName:null,//用户相关的信息
    isLogin:false,//登录状态
    token:'' //用户登录成功后持有的token
  },
  //关联着其他三个目录，目的松耦合
  getters,
  mutations,
  actions
})
export default store;

 02.创建getters.js文件

• 用于获取store.js文件中的参数
• 包含多个计算属性(get)的对象
• 谁来读取: 组件中: $store.getters.xxx

export const isLogin = state => state.isLogin;
export const userName = state => state.userName;
export const roleName = state => state.roleName;

 03.创建mutations.js文件

• 包含多个直接更新 state 的方法(回调函数)的对象
• 由action 中的 commit(‘mutation 名称’)来触发
• 只能包含同步的代码, 不能写异步代码

//更改用户状态信息
export const userStatus = (state, user) =>{
    //判断用户是否存在
    if (user!=null){
        state.userName = JSON.parse(user).userName;
        state.roleName = JSON.parse(user).roleName;
        state.isLogin = true;
    }else if (user==null){
        //登出时清空sessionStroage里面的参数
        sessionStorage.setItem("user",null);
        sessionStorage.setItem("userToken",'');
        state.currentUser = null;
        state.isLogin = false;
        state.assign='';
    }
}
//更改token
export const setToken = (state,token) =>{
    if (token!=null){
        state.token = token;
    }else {
        state.token = '';
    }
}

04.创建actions.js文件

• 包含多个事件回调函数的对象
• 通过执行: commit()来触发 mutation 的调用, 间接更新 state
• 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’
• 可以包含异步代码(定时器, ajax) 

//调用mutations
export const setUser = ({commit},user) => {
    commit("userStatus",user);
}
export const setToken = ({commit},token) =>{
    commit("setToken",token);
}

05.在入口文件main.js文件引入store.js

        引入vuex：

// 引入vuex
import store from './store/store'

         在vue实例中创建store：

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //创建store对象
  components: { Layout },
  template: '<Layout/>'
})

        图片演示：

注意：将vuex集成 到vue项目中如果使用的idea会自动提示下载插件依赖，或者用vue脚手架集成

3.在用户登录的时候，保存相关登录信息的参数

在登录成功之后，执行下方的代码，先将用户相关的参数和token存放入sessionStorge，再由sessionStorage传入vuex中。关于sessionStorage的相关api的用法

//将用户名放入sessionStorage中
sessionStorage.setItem("user", JSON.stringify(resp.data));
sessionStorage.setItem("userToken", resp.data.userPwd)

再将用户登录的相关参数放入vuex，调用setUser即执行actions.js中的方法来改变状态，则进入mutations.js中的userStatus方法，最终实现改变store.js中的三个状态。

 //将用户名放入vuex中
_this.$store.dispatch("setUser", JSON.stringify(resp.data));
_this.$store.dispatch("setToken", resp.data.userPwd);
//打印login状态
 console.log(_this.$store.state.isLogin);

这时可以通过{{ this.$store.state.xxx}}获取到vuex中state的状态参数到页面中

    <div class="back">
        <h5>当前管理员：<span style="color: red">{{ this.$store.state.userName }} </span> 登录!
            等级：<span style="color: red">{{ this.$store.state.roleName }} </span>
            <el-button style="color:#0340f9;" type="text" @click="open">【退 出】</el-button>
        </h5>
    </div>

4.获取已经登录的状态及其相关信息进行验证用户是否已经登录

由于vuex中的状态state一旦页面刷新，数据就不再存在。所以为了实现在刷新页面时，仍然展现出或获取相关参数，就需要从sessionStorage种提取状态再传值给vuex

methods: {
        //判断是否已经登录状态
        isLogin() {
            //判断sessionStorage中是否有登录信息
            if (sessionStorage.getItem("user") != null && sessionStorage.getItem("userToken")) {
                //存在登录信息就从sessionStorage中提取状态再传值给vuex中
                this.$store.commit("userStatus", sessionStorage.getItem("user"));
            } else {
                //登录不成功就将vuex中的state清空
                this.$store.commit("userStatus", null);
            }
            //返回登录状态islogin
            return this.$store.getters.isLogin;
        },
        //通过登录状态来判断用户是否登录执行相关的操作
        ver() {
            if (this.$store.state.isLogin) {
                console.log("已登录");
                // this.$notify({
                //     title: '系统提示',
                //     message: '欢迎管理员：'+this.$store.state.userName,
                //     position: 'bottom-right'
                // });
            } else {
                //如果没有登录就返回登录界面
                this.$router.push("/");
                this.$message({
                    message: '警告，请登录账户',
                    type: 'warning'
                });
            }
        },
}

每当刷新页面的时候使用钩子函数调用验证用户登录的方法,这样就实现了保存用户登录信息的功能

   //此方法写在method外
 created() {
        this.isLogin();
        this.ver();
    }

5.执行登出操作

        演示的html：

<div class="back">
        <h5>当前管理员：<span style="color: red">{{ this.$store.state.userName }} </span> 登录!
            等级：<span style="color: red">{{ this.$store.state.roleName }} </span>
            <el-button style="color:#0340f9;" type="text" @click="open">【退 出】</el-button>
        </h5>
    </div>

        登出账号的方法：

open() {
            this.$confirm('确定退出当前账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push("/");
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
            }).catch(() => {
                this.exits = false;
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });
        },

             到这里需要注意的是用户登录之后，只要回到登录界面，必然是执行了登出操作。所以直接在login.vue（登录页面）里加一个路由控制就可以了，就是login的组建内守卫，当用户处在登录页面是就会触发它将sessionStorage里的用户参数和token清空

    //此方法写在method外面
    //to: Route: 即将要进入的目标路由对象
    //from: Route: 当前导航正要离开的路由
    //next()：必须执行
 beforeRouteEnter: (to, from, next) => {
        next(vm => {
        // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
            vm.$store.dispatch("setUser", null);
        });
    },

关于beforeRouteEnter详细解释