后台管理系统实战项目-04 使用jwt-decode解析Token值

为什么要解析Token？

通过前后端分离后，后端会返回Token，解析Token之后前端可以直接使用Token中所包含的信息，当然可以不使用Token的值，获取Token后可以再次请求一下用户信息，但是多了一步。

所以直接使用Token解析后的值，会很方便。

1、安装jwt-decode

pnpm install jwt-decode --save

2、解析Token

 const code = jwtDecode(token as any)

3、创建User对象

新建UseInfo.ts文件

export class UserInfo{
    Id:string="";
    NickName:String="";
    Role:String="";
    UserName:string="";
    Avatar:string="";
}

4、使用解析后的对象 解析后的token值为对象，可以直接使用

  const userInfo:UserInfo=code as any;
            localStorage["token"]=token;
            localStorage["nickname"]=userInfo.NickName;
            localStorage["role"]=userInfo.Role;
            store.commit("SettingNickName",userInfo.NickName)
            store.commit("SettingToken",token)

over