如何在reactjs中使用JWT解码库对JWT令牌进行解码

我是新手，我想在我的SPA中添加JWT身份验证。我的目标是在应用程序的本地存储中获取令牌，但无法解码令牌。我想不出我错在哪里了。有人能帮我解码吗。下面是我的API生成的一个示例令牌-m5izii6mtu4odqwnjq5mywizzhwhijoxntg4ntc5mjkzlcjpc3mioiijodhrwoi8vbg9jywxob3n0ojq1mq1mj6imh0dha6ly9sb2nhbghvc3q6nduw0.mjmdkcookolktol_iuaaqe7hne2xmudnc6jdagx3w

以下是AuthService代码：

import decode from 'jwt-decode';
export default class AuthService {
    constructor(domain) {
        this.domain = domain || '/api/Login/auth'
        this.fetch = this.fetch.bind(this) // React binding stuff
        this.login = this.login.bind(this)
        this.getProfile = this.getProfile.bind(this)
    }

    login = (email, password) => {
        return this.fetch(`${this.domain}`, {
            method: 'POST',
            body: JSON.stringify({
                email,
                password
            })
        }).then(res => {
            this.setToken(res.token)
            return Promise.resolve(res);
        })
    }

    loggedIn () {
        const token = this.getToken()
        return !!token && !this.isTokenExpired(token)
    }

    isTokenExpired (token) {
        try {
            const decoded = decode(token);
            if (decoded.exp < Date.now() / 1000) {
                return true;
            }
            else
                return false;
        }
        catch (err) {
            return false;
        }
    }

    setToken (idToken) {
        localStorage.setItem('id_token', idToken)
        console.log("token values", idToken)
    }

    getToken () {
        return localStorage.getItem('id_token')
    }

    logout () {
        localStorage.removeItem('id_token');
    }

    getProfile () {
        return decode(this.getToken());
    }


    fetch (url, options) {
        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
        if (this.loggedIn()) {
            headers['Authorization'] = 'Bearer ' + this.getToken()
        }

        return fetch(url, {
            headers,
            ...options
        })
            .then(this._checkStatus)
            .then(response => response.json())
    }

    _checkStatus (response) {

        if (response.status >= 200 && response.status < 300) {
            return response
        } else {
            var error = new Error(response.statusText)
            error.response = response
            throw error
        }
    }
}

Login.js代码：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import AuthService from '../../service/AuthService';

class LoginComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            username: '',
            password: '',
            message: '',
        }
        this.login = this.login.bind(this);
this.Auth = new AuthService();
    }

   componentWillMount () {
    if (this.Auth.loggedIn())
      this.props.history.replace('/');
  }
    login = (e) => {
        e.preventDefault();
       this.Auth.login(this.state.email, this.state.password).then(res => {
            if(res.status === 200){
                localStorage.setItem("userInfo", JSON.stringify(res));
                this.props.history.push('/');
            }else {
                this.setState({message: res.data.message});
            }
        });
    };

    onChange = (e) =>
        this.setState({ [e.target.name]: e.target.value });

    render() {
        return(
            <React.Fragment>
                <AppBar position="static">
                    <Toolbar>
                        <Typography variant="h6">
                            React User Application
                        </Typography>
                    </Toolbar>
                </AppBar>
                <Container maxWidth="sm">
                    <Typography variant="h4" style={styles.center}>Login</Typography>
                    <form>
                        <Typography variant="h4" style={styles.notification}>{this.state.message}</Typography>
                        <TextField type="text" label="USERNAME" fullWidth margin="normal" name="username" value={this.state.username} onChange={this.onChange}/>

                        <TextField type="password" label="PASSWORD" fullWidth margin="normal" name="password" value={this.state.password} onChange={this.onChange}/>

                        <Button variant="contained" color="secondary" onClick={this.login}>Login</Button>
                    </form>
                </Container>
            </React.Fragment>
        )
    }

}

const styles= {
    center :{
        display: 'flex',
        justifyContent: 'center'

    },
    notification: {
        display: 'flex',
        justifyContent: 'center',
        color: '#dc3545'
    }
}

export default LoginComponent;

---

有人能帮我或给我推荐合适的链接吗？

可能是解析问题，试试这个

getToken () {
    return JSON.parse(localStorage.getItem('id_token'));
}

---

您的示例令牌看起来像有效令牌，应该成功解码

---

因此，请确保您只访问这些字段，没有角色或用户id字段。如果在生成令牌时将这些字段添加到令牌中，它们将显示。

您可以添加生成令牌的代码吗？还要检查您是否向问题添加了有效的令牌，您添加的令牌似乎不完整。@SuleymanSah-Hi，令牌是从本地后端生成的，我正在通过api链接（即/api/Login/auth）获取令牌。我已经更新了查询中的令牌值。您在本地存储中看到令牌了吗？@SuleymanSah-是的，我在本地存储中得到令牌-即在AuthService.js的setToken函数中。但是您是否在浏览器中签入了？你看到了吗？非常感谢！。我在想我的代码中有一些错误。谢谢你帮助我：