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

1.安装vuex

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

npm install vuex --save

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

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

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

        vuex的目录结构:  

         在vue中使用vuex和session Storage保存用户登录状态_第1张图片

  • 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: ''
})

        图片演示:

在vue中使用vuex和session Storage保存用户登录状态_第2张图片

注意:将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的状态参数到页面中

    
当前管理员:{{ this.$store.state.userName }} 登录! 等级:{{ this.$store.state.roleName }} 【退 出】

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:

当前管理员:{{ this.$store.state.userName }} 登录! 等级:{{ this.$store.state.roleName }} 【退 出】

        登出账号的方法:

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详细解释

你可能感兴趣的:(vue,vue.js,html,javascript)