vue token解析 前端解析token中携带的数据

1. 安装插件

	npm install jwt-decode --save

2. 引入jwtDecode

	import jwtDecode from 'jwt-decode'
	const code = jwtDecode(res.data.data.accessToken)
	console.log(code)// 就可以解析成功了

实际使用代码：

<template>
  <div id="logindiv">
    <el-row justify="center" align="middle" style="height: 90vh">
      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>欢迎使用北猫商城管理系统</span>
            </div>
          </template>
          <el-form :model="ruleForm" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-form-item label="账号:" prop="userId">
              <el-input v-model="ruleForm.userId" placeholder="请输入您的邮箱" />
            </el-form-item>
            <el-form-item label="密码:" prop="pwd1">
              <el-input
                v-model="ruleForm.pwd1"
                type="password"
                placeholder="请输入您的密码"
              />
            </el-form-item>
            <el-form-item label="确认密码:" prop="pwd2">
              <el-input
                v-model="ruleForm.pwd2"
                type="password"
                placeholder="再次输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
              <el-button @click="resetForm(ruleFormRef)">重填</el-button>
            </el-form-item>
           <!-- 超链接 -->
            <el-form-item>
              <el-link href="/#/register" type="danger"> 还没有账号？去注册</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// MD5加密
import { Md5 } from 'ts-md5';
// vue参数
import { ref, reactive, onMounted } from "vue";
// 消息提示
import { ElMessage } from "element-plus";
//pinia本地储存
import { storeToRefs } from "pinia";
import appStore from "@/store/appStore";
//token
import jwtDecode from "jwt-decode";
//axios封装
import http from "@/http/index";
// 路由
import { useRoute, useRouter } from "vue-router";
// 属性校验
import type { FormInstance, FormRules } from "element-plus";
const route = useRoute();
const router = useRouter();
let { user, token } = storeToRefs(appStore());
const ruleFormRef = ref<FormInstance>();
 
 const ruleForm = reactive({
  userId: "[email protected]",
  pwd1: "123456",
  pwd2: "123456",
});

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.pwd1) {
    callback(new Error("两次密码不匹配!"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules>({
  userId: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    //{ min: 3, max: 5, message: '至少 3 to 5', trigger: 'blur' },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  pwd1: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "至少 6", trigger: "blur" },
  ],

  pwd2: [{ validator: validatePass2, trigger: "blur" }],
});

const callApi = () => {
  http
    .post("/api/login", {
      userId: ruleForm.userId,
      pwd: Md5.hashStr("ruleForm.pwd1").toUpperCase(),
    })
  //添加token
  .then((res: any) => {
      const tokenObj: any = jwtDecode(res);
      user.value.id = tokenObj.id;
      user.value.userId = tokenObj.userId;
      token.value = res;
      router.push({ name: "home" });
    })
    .catch((err: any) => {});
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      //验证成功，执行下面方法
      callApi();
    } else {
      // console.log('error submit!', fields)
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
#logindiv {
  background: url("../assets/login.jpeg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.title {
  color: white;
}
</style>