vuex刷新页面丢失登录token信息的解决方案

// 登录
exports.login = (req, res) => {
  const userinfo = req.body;
  //   console.log(userinfo)
  const sql = "select * from users where username = ?";
  db.query(sql, userinfo.username, (err, results) => {
    if (err) return res.status(404).json(err);
    if (results.length !== 1) return res.status(400).json("用户不存在");
    const compareResult = bcrypt.compareSync(
      userinfo.password,
      results[0].password
    );
    if (!compareResult) return res.status(400).json("用户名或密码错误");
    const user = {
      id: results[0].id,
      username: results[0].username,
      email: results[0].email,
      identify: results[0].identify
    };
    const tokenStr = jwt.sign(user, config.jwtSecretKey, { expiresIn: 36000 });
    // if (jwt.verify(tokenStr, config.jwtSecretKey, (err, decode) => {
    //   if (err) return res.status(401).json(err)
    // }))
    res.json({
      status: 200,
      message: "登录成功",
      token: "Bearer " + tokenStr,
    });
  });
};

submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$axios.post('/user/login', this.loginUser)
                        .then(res => {
                            const { token } = res.data
                            // console.log(token)
                            localStorage.setItem('mytoken', token)
                            // 解析token
                            const decode = jwt_decode(token)
                            console.log(decode)
                            // 将解析后的token存入vuex中
                            this.$store.dispatch('setAuthenticated', !this.isEmpty(decode))
                            this.$store.dispatch("setUser", decode)
                            this.$router.push('/')
                        })
                        .catch(err => {
                            // console.log(err)
                            this.$message.error('登录失败，请检查用户名及密码是否正确！')
                        })
                } else {
                    this.$message({
                        type: "error",
                        message: '错误提交申请'    
                    })
                    return false
                }
            })
        },

const actions = {
  setAuthenticated: ({ commit }, isAuthenticated) => {
    commit(types.SET_AUTHENTICATED, isAuthenticated);
  },
  setUser: ({ commit }, user) => {
    commit(types.SET_USER, user);
  },
  clearCurrentState: ({ commit }) => {
    commit(types.SET_AUTHENTICATED, false);
    commit(types.SET_USER, null);
  },
};

import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "./router"
// 请求拦截
axios.interceptors.request.use(config => {
    if(localStorage.eleToken){
        // 设置统一的请求头
        config.headers.Authorization = localStorage.eleToken
    }
    return config
}, error => {
    return Promise.reject(error)
})
//响应拦截
axios.interceptors.response.use(response => {
    return response
}, error => {
    // 错误提醒
    endLoading();
    Message.error(error.response.data)
    // 获取错误状态码
    const {status} = error.response
    if(status == 401){
        Message.error("token失效，请重新登录")
        localStorage.removeItem('eleToken')
        router.push('/login')
    }
    return Promise.reject(error)
})
export default axios

// 路由守卫
import jwt_decode from 'jwt-decode'
router.beforeEach((to, from, next) => {
  // const EXPIRESTIME = 36000  
  const isLogin = localStorage.mytoken ? true : false;
  if (isLogin){
    const decode = jwt_decode(localStorage.mytoken)
    const date = parseInt(new Date().getTime() / 1000)
    if ((date - decode.iat) > (decode.exp - decode.iat)){
      localStorage.removeItem('mytoken')
      next("/login");
    }
  }
  if (to.path == "/login" || to.path == "/register") {
    next();
  } else {
    isLogin ? next() : next("/login");
  }
});

created() {
    // 在页面加载时读取sessionStorage里的状态信息
   if (sessionStorage.getItem('store')) {
       this.$store.replaceState(
         Object.assign(
           {},
           this.$store.state,
           JSON.parse(sessionStorage.getItem('store'))
         )
      )
     }
     // 在页面刷新时将vuex里的信息保存到sessionStorage里,beforeunload事件在页面刷新时先触发    
     window.addEventListener('beforeunload', () => {
       sessionStorage.setItem('store', JSON.stringify(this.$store.state))      
     })
    // console.log(this.$store.state)
}

 created() {
    // 在页面加载时读取sessionStorage里的状态信息
    // if (sessionStorage.getItem('store')) {
    //   this.$store.replaceState(
    //     Object.assign(
    //       {},
    //       this.$store.state,
    //       JSON.parse(sessionStorage.getItem('store'))
    //     )
    //   )
    // }
    // // 在页面刷新时将vuex里的信息保存到sessionStorage里,beforeunload事件在页面刷新时先触发    
    // window.addEventListener('beforeunload', () => {
    //   sessionStorage.setItem('store', JSON.stringify(this.$store.state))      
    // })
    // console.log(this.$store.state)
    if (localStorage.getItem('mytoken')) {
      const decode = jwt_decode(localStorage.mytoken)
      // console.log(decode)
      this.$store.dispatch("setUser", decode)
      // this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(decode)))
    }
    // window.addEventListener('beforeunload', () => {
    //   localStorage.setItem('mytoken', localStorage.mytoken)
    // })
  },