基于Vuex重构登录，和退出登录逻辑

1、封装保存，删除用户信息和token值的方法

在utils文件夹下面创建一个auth.js的文件，主要是对用户登录返回的token值，以及token值请求的用户信息进行封装

const TOKEN_KEY = 'jhj-token'
const USER_KEY = 'jhj-user'

// 获取 token
export function getToken() {
    return localStorage.getItem(TOKEN_KEY)
}
// 保存 token
export function setToken(token) {
    return localStorage.setItem(TOKEN_KEY, token)
}
// 获取用户信息
export function getUser() {
    return JSON.parse(localStorage.getItem(USER_KEY))
}
//保存用户信息
export function setUser(user) {
    localStorage.setItem(USER_KEY, JSON.stringify(user))
}
//移除用户信息
export function removeToken() {
    localStorage.removeItem(TOKEN_KEY)
    localStorage.removeItem(USER_KEY)
}

2、创建vuex的文件夹

创建store文件夹，index.js、 modules文件夹，文件夹下面创建user.js文件
结构如下所示

index.js中引入Vue、Vuex、user.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
const store=new Vuex.Store({
    modules:{
        user
    }
})
export default  store

并且在main.js中引入这个store文件夹下面的index.js文件，
// 引入vuex的store,可以不需要导入到
import store from ‘./store/index’，并在new vue{}里面引入 store,

import Vue from "vue";
// 引入elementUi,注意引入在vue的下面
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from "./App.vue";
import router from "./router";
// 导入全局的权限文件
import './permission'
// 引入vuex的store,可以不需要导入到
import store  from './store/index'

// 使用elementUI
Vue.use(ElementUI)

// 关于报错是否,当生产环境则不报错，production生产环境，。
Vue.config.productionTip = process.env.NODE_ENV==='production';
console.log(process.env.VUE_APP_BASE_API)
console.log('22222'+process.env.VUE_APP_SERVICE_URL)
new Vue({
  // 将vuex，注册到组件中
  store,
  router,
  render: h => h(App)
}).$mount("#app");

3、user.js 的配置

在user.js中引入axios的login.js接口文件，和封装token和user值的auth.js文件

import { getToken, setToken, getUser, setUser, removeToken } from '@/utils/auth'
import { login, getUserInfo, logOut } from '@/api/login'

采用下面模式导出user

const user={
	state:{
	},
	mutations:{
	},
	actions:{
	}

}
export default user

state的配置

getToken() 作为token的初始值，解决页面刷新后为空的问题，下面getUser同样的原理

 state: {
        token: getToken(),//gettoken() 作为token的初始值，解决页面刷新后为空的问题
        user: getUser(),
    },

mutations的配置

mutations下面设置两个方法SET_TOKEN()是将token值保存下来，SET_USER()方法是将user信息保存下来

 // mutations一般是赋值使用
    mutations: {
        // 设置token
        SET_TOKEN(state, token) {
            state.token = token
            setToken(token)
        },
        // 设置用户信息
        SET_USER(state, user) {
            state.user = user
            setUser(user)
        }

    },

actions的配置信息

action中写入三个方法，
Login()方法登录的时候，将请求到的token值保存到 setToken(token)里面。
GetUserInfo()方法，拿到token值，去请求用户信息user，并将用户信息保存到setUser(user)里面。
LogOut(）方法，退出登录，清空token值，清空用户信息，清空本地信息

  // actions一般是赋值使用
    // form.username.thrim(),传入表单中的用户名，并去掉左右空格
    actions: {
        // 登录逻辑
        Login({ commit }, form) {
            // resolve触发成功后的处理
            // 封装的异步对象Promise，两个参数，
            // resolve,reject
            // 第一个resolve触发成功处理
            // 第二个reject触发失败。异常处理
            return new Promise((resolve, reject) => {
                login(form.username.trim(), form.password).then(response => {
                    const resp = response.data//获取到响应的data数据
                    commit('SET_TOKEN', resp.data.token)
                    resolve(resp)
                }).catch(error => {
                    reject(error)
                })
            })




        },
        // 通过token获取用户信息
        GetUserInfo({ commit, state }, token) {
            return new Promise((resolve, reject) => {
                getUserInfo(state.token).then(response => {
                    const resp = response.data
                    console.log('用户信息拿取' + resp)
                    commit('SET_USER', resp.data)
                    resolve(resp)
                }).catch(error => {
                    reject(error)
                })
            })
        },
        // 退出
        LogOut({ commit, state }) {
            return new Promise((resolve, reject) => {
                logOut(state.token).then(response => {
                    const resp = response.data
                    resolve(resp)
                    // 清空token值
                    commit('SET_TOKEN', '')
                    // 清空user值
                    commit('SET_USER', '')
                    // 移除本地用户信息
                    removeToken()

                }).catch(error => {
                    reject(error)
                })
            })
        }
    }

Login登录请求，并将用户信息保存下来

  // 登录逻辑
        Login({ commit }, form) {
            // resolve触发成功后的处理
            // 封装的异步对象Promise，两个参数，
            // resolve,reject
            // 第一个resolve触发成功处理
            // 第二个reject触发失败。异常处理
            return new Promise((resolve, reject) => {
                login(form.username.trim(), form.password).then(response => {
                    const resp = response.data//获取到响应的data数据
                    commit('SET_TOKEN', resp.data.token)
                    resolve(resp)
                }).catch(error => {
                    reject(error)
                })
            })
        },

1、 Login({ commit }, form) 传入{commit},这个用于调用mutations里面的方法，form这个是表单信息，传入的用户名和密码，
2、采用返回return new Promise((resolve, reject) => {})的方法，这个在ES6中的异步回调的方法，如果请求成功，通过 resolve(resp)这个返回信息，如果出错则用 reject(error)，返回信息
3、form.username.trim()这个是移除username后面的空格
4、提交登录系统的以前的调用方法如下，
调用上面的表单数据，并将数据效验，成功，拿取token，再用token请求用户信息，再将token及用户信息保存到本地

  submitForm(formName) {
     //如果上面不等于空则验证,传入异步对象
          login(this.form.username, this.form.password).then(response => {
            console.log(response);
            const resp = response.data;
           
            if (resp.flag) {
              // 验证登录
              // 通过token获取用户信息
              // getUserInfo   // 获取到用户信息
              getUserInfo(resp.data.token).then(respon => {
                const eeuu = respon.data;
                if (eeuu.flag) {
                  //在js中使用JSON.stringify()转化数据为json数据，不然就会出现[object,object]
                  var b = JSON.stringify(respon.data.data);
                  console.log("b" + b);
                  // 保存用户信息到本地
                  localStorage.setItem("jhj-user", b);
                  localStorage.setItem("jhj-token", resp.data.token);
                  // 前往首页
                  this.$router.push("/");
                } else {
                  this.$message({
                    message: eeuu.message,
                    type: "warning",

                  });
                }
              });
            } else {
              // 未通过
              // alert(resp.message);
              // 这个就是饿了么UI,弹出框
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });

采用 this.$store.dispatch(“Login”, this.form)调用vuex中的action里面的Login方法，响应成功则是拿到 new Promise(){}返回的resolve(resp)内容

   submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch("Login", this.form)
            .then(response => {
              // response响应回来的真实的对象
              if (response.flag) {
                this.$router.push("/");
              }else{
                this.$message({
                  message:response.message,
                  type:'warning'
                })
              }
            })
            .catch(error => {
              // 出现异常不处理，因为前面处理过了
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }

在permission.js文件中修改以前信息
引入store，因为是在js文件中，而不是在.vue的组件中，所以不能使用this.$store这样

import store from './store'

拿到state中的token值

 // 获取页面保存的token值
    // const token = localStorage.getItem("jhj-token");
    // 拿到VueX的数据
    const token = store.state.user.token

运用token请求后台，并保存返回的用户信息

actions中的GetUserInfo()方法，传入的{ commit, state }表示，commit为调用mutations中的方法，state 是为了拿到state:{}中存储的值，同样采用 return new Promise((resolve, reject) =>异步请求的方法包装axios的请求，成功则返回resolve(resp)，失败则返回 reject(error)

 // 通过token获取用户信息
        GetUserInfo({ commit, state }, token) {
            return new Promise((resolve, reject) => {
                getUserInfo(state.token).then(response => {
                    const resp = response.data
                    console.log('用户信息拿取' + resp)
                    commit('SET_USER', resp.data)
                    resolve(resp)
                }).catch(error => {
                    reject(error)
                })
            })
        },

在permission.js中替换以前本地拿取的方法

  // const userinfo = localStorage.getItem("jhj-user");
   const userinfo=store.state.user.user

并验证user信息是否存在

  // const userinfo = localStorage.getItem("jhj-user");
            const userinfo=store.state.user.user
            // 请求的路由非登录页面，先在本地查看是否有用户信息，
            if (userinfo) {
                next()
            }
            // 如果没有用户信息，则请求导入信息
            else {
                // getUserInfo(token).then(response => {

                //     const resp = response.data
                //     // 如果返回的flag为true，则
                //     if (resp.flag) {
                //         // 获取到用户信息，则进入非登录页面，否则回到登录页面
                //         // 转化为json字符串,保存到本地
                //         localStorage.setItem("jhj-user", JSON.stringify(resp.data));
                //         // 跳转到指定的目录
                //         next()
                //     }
                //     else {
                //         // 未获取到用户信息，则需要重新登录
                //         next('/login')
                //     }
                // })
                // 下面的这个response是  resolve(resp)这个传过来的信息
                // 而不是axios传过来的信息
                store.dispatch('GetUserInfo').then(response => {
                    if (response.flag) {
                        next()
                    }
                    else{
                        next({path:'/login'})
                    }
                }).catch(error => {
                    // 出现异常处理

                })

退出登录，删除用户信息

退出登录，将state{}里面的token值，user信息移除， removeToken()将浏览器中的用户信息也移除

  // 退出
        LogOut({ commit, state }) {
            return new Promise((resolve, reject) => {
                logOut(state.token).then(response => {
                    const resp = response.data
                    resolve(resp)
                    // 清空token值
                    commit('SET_TOKEN', '')
                    // 清空user值
                    commit('SET_USER', '')
                    // 移除本地用户信息
                    removeToken()

                }).catch(error => {
                    reject(error)
                })
            })
        }

退出登录以前方法

  handleLogOut() {
 this.$message("退出系统");
      //  获取浏览器保存的token
      const token = localStorage.getItem("jhj-token");
      logOut(token).then(response => {
        //返回一个箭头函数
        const resp = response.data;
        if (resp.flag) {
          // 移除之前保存在本地的token信息
          localStorage.removeItem("jhj-token");
          localStorage.removeItem("jhj-user");
          this.$router.push("/index");
        } else {
          this.$message({
            message: resp.message,
            type: "warning",
            // duration消息停留时间，单位毫秒
            duration: 500
          });
        }
      });

退出登录采用vuex后，改变的方法，采用 this.$store.dispatch拿到用户的信息

  // 退出系统
    handleLogOut() {
          // 调用退出系统的store的接口
      this.$store.dispatch("LogOut").then(response => {
        // 退出成功
        if (response.flag) {
          this.$router.push("/login");
        }
        // 退出失败提示信息
        else{
          this.message({
            message:response.message,
            type:'warning'
          })
        }
      });
    },