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: "ohftiaq3691@163.com",
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>