Vue 前台登陆之后 登录人信息及token 存储

1、登录成功后将后台返回的token和user存在store

handleSubmit2: function () {
    this.$refs.ruleForm2.validate((valid) => {
         if (valid) {
             var loginParams = {sjhm: this.ruleForm2.account, mm: this.ruleForm2.checkPass};
             this.$api.userLogin.loginByEmail(loginParams).then(res => {
             this.logining = false;
             let {msg, code, user} = {msg: res.data.msg, code: res.data.code, user: res.data.data};
             if (code !== '200') {
                    this.$message({ message: msg, type: 'error'});
              } else {

                    this.$message({ message: "登录成功", type: 'success' });
                    //将后台返回的token和user存在store
                    this.$store.commit('SET_TOKEN', res.data.data.token)
                    this.$store.commit('GET_USER', JSON.stringify(res.data.data))
                    this.$router.push({path: this.$route.query.redirect});
               }
                     }
          });
          } else {
                     console.log('error submit!!');
                     return false;
           }
       });
 },

2、VUEX store 配置

文件目录

index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    user,
  },
});

export default store

user.js文件

const user = {
    state: {
        user: window.sessionStorage.getItem('user'),
        token: window.sessionStorage.getItem('token')
    },

    mutations: {
        //将token保存到sessionStorage里，token表示登陆状态
        SET_TOKEN: (state, data) => {
            state.token = data
            window.sessionStorage.setItem('token', data)
        },
        //获取用户名
        GET_USER: (state, data) => {
            // 把用户名存起来
            state.user = data
            window.sessionStorage.setItem('user', data)
        },
        //登出
        LOGOUT: (state) => {
            // 登出的时候要清除token
            state.token = null
            state.user = null
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('user')
        }
    },
    actions: {

    }
};

export default user;

存储完成

3、获取

this.$store.state.user.token
//获取当前登录人
this.$store.state.user.user

4、将token加入axios请求头

// 创建axios实例
var instance = axios.create({    timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
 * 请求拦截器
 * 每次请求前，如果存在token则在请求头中携带token
 */
instance.interceptors.request.use(
    config => {
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
        const token = store.state.user.token;
        token && (config.headers.common['token']  = token);
        return config;
    },
    error => Promise.error(error))

前台设置完成