如何将我的 JWT 令牌存储在本地存储中？

Posted 2023-03-10

【中文标题】如何将我的 JWT 令牌存储在本地存储中？

【英文标题】：How can I store my JWT Token in localstorage?

【发布时间】：2022-01-15 08:34:22

【问题描述】：

userAction.js -> 前端，动作

export const login = (userID, password) => async (dispatch) => 
    try 
        dispatch( type: USER_LOGIN_REQUEST );
       
        const url = "http://localhost:8080/authenticate/";
        const config = 
          auth: 
            username: userID,
            password,

          ,
        ;
    
        const data = ;
        const response = await axios.post(
            url, 
            data, 
            config,
            
        )

        dispatch( type: USER_LOGIN_SUCCESS, payload: config);
        
 
        if (response.status === 200) 
          // Login succeeded
          const token = response.data.token;
          console.log("TOKEN\n" + token);
          config.token = response.data.token;
          console.log(response.data.token);
          
        
        
        localStorage.setItem("userInfo", JSON.stringify(config) );
    

我在 REST 服务器中的登录功能：

exports.login = async (req,res) =>

  const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
  const [userID, password] = Buffer.from(b64auth, 'base64').toString().split(':');
  const user = await User.findOne( userID: userID );
  if(!user) return res.status(400).send('User not found');
  const validPass = await bcrypt.compare(password, user.password);
  if(!validPass) return res.status(400).send('Incorrect Password');

  //const token = generateToken(user.userID);
  let payload = 
    userID: user.userID
  
  const token = generateToken(userID);
  
  res.header('Authorization', 'Bearer ' + token).json(user);
  
  return token;

我以这种方式生成我的令牌：

const generateToken = (_id) => 
  console.log('Signing token for ID ', _id);
  console.log('Secret key is ', process.env.JWT_KEY);
  const token = jwt.sign( _id, process.env.JWT_KEY, 
    expiresIn: "30d",
  );
  console.log('Signed token: ', token);
  return token;
;

我尝试将我的令牌存储在我的“userInfo”状态中..但只显示用户名和密码而不是令牌..它以前可以工作..但我不知道为什么它不再工作了^^我我完全不知所措

希望有人看到错误

我的控制台给了我详细信息：

TOKEN 
undefined

【问题讨论】：

如果你登录response.data会怎样？

等一下，我会尝试@Leau并编辑登录到我的答案

@Leau 完整的用户显示在控制台但没有令牌

你能显示你在响应中添加令牌的代码吗？

问题是响应没有属性token。您在 JSON 响应中返回 user。您是否打算在 API 响应中同时返回用户数据和令牌？比如，如果你在做res.header().json(user)，你的return token 有什么意义？

【参考方案1】：

您期望response.data 是一个对象。在这种情况下，更新您的 API 处理程序以在对象中返回属性 token：

exports.login = async (req,res) =>

  const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
  const [userID, password] = Buffer.from(b64auth, 'base64').toString().split(':');
  const user = await User.findOne( userID: userID );
  if(!user) return res.status(400).send('User not found');
  const validPass = await bcrypt.compare(password, user.password);
  if(!validPass) return res.status(400).send('Incorrect Password');

  //const token = generateToken(user.userID);
  let payload = 
    userID: user.userID
  
  const token = generateToken(userID);
  
  return res.header('Authorization', 'Bearer ' + token).json( user, token );

希望对您有所帮助！