(二十一)VueCli3.0全栈——解析token并存储到vue

2019-07-10  本文已影响0人  彼得朱

本节主要内容:解析token里面的数据并存储到vuex中。

1、安装解析token的模块

2、解析token里面的数据

测试

3、存储到vuex中

测试
```javascript
// token存储到vuex中
this.$store.dispatch("setAuthenticated",!this.isEmpty(decoded));
this.$store.dispatch("setUser",decoded);
```
token存储到vuex中
发现登录之后再次刷新,标红部分会消失,这是由于刷新的时候根组件没有进行判断
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import jwt_decode from 'jwt-decode';
export default {
  name: "app",
  components: {},
  created () {
    if(localStorage.eleToken){
      const decoded = jwt_decode(localStorage.eleToken);
      // token存储到vuex中
      this.$store.dispatch("setAuthenticated",!this.isEmpty(decoded));
      this.$store.dispatch("setUser",decoded);
    }
  },
  methods: {
    // 判断是否为空,空值返回false,真值返回true
    isEmpty(value){
      return(
        value === undefined ||
        value === null ||
        (typeof value === "object" && Object.keys(value).length === 0) ||
        (typeof value === "string" && value.trim().length === 0)
      );
    }
  }
};
</script>





<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}

</style>

上一篇 下一篇

猜你喜欢

热点阅读