jwt-存在哪

13次阅读

共计 1703 个字符,预计需要花费 5 分钟才能阅读完成。

最近一直在使用 jwt,前端通过用户名、密码登陆成功后,接口返回一个 jwt

// login
exports.user_login = async function (req, res, next) {const { username, password} = req.body
  let ret = await userModel.userLogin(username, password)
  if (!ret) return next(createError(500)) // sql 执行失败,直接给 500
  if (ret.length !== 1) { // 用户名或密码错误
        res.json({
            code: 100,
            message: '用户名或密码错误',
            data: null
        })
  } else {const user = ret[0]
    const token = generateJWT(user)
        res.json({
            code: 100,
            message: '返回成功',
            data: {token}
        })
  }
}

// 生成 jwt
function generateJWT(user) {let now = new Date()
  let expire = new Date(now).getTime() + 30 * 60 * 1000 // 30 min 后过期
  return jwt.sign({
    id: user.id,
    username: user.username,
    password: user.password,
    role: user.role,
    exp: expire / 1000
  }, SECRET)
}

前端请求成功后,收到 token,存储在本地

    // vuex store 中
  login({commit}, userInfo) {const { username, password} = userInfo
    return new Promise((resolve, reject) => {login({ username: username.trim(), password }).then(res => {if (res) {commit('SET_TOKEN', res.token)
          setSessionItem('token', res.token) // 存到 sessionStorage 中
          resolve(true)
        } else {resolve(false)
        }
      }).catch(error => {console.log('error:', error) // for debug
        reject(error)
      })
    })
    }
    

然后以后每次请求接口都带上这个 jwt

// 请求拦截器
axios.interceptors.request.use(
  config => {const token = getSessionItem('token') || ''if (token) config.headers['jwt'] = token
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

之前做移动端是这么搞的,但今天在做 PC 端一个管理后台时,发现 jwt 存到 sessionStorage 中有个问题,同源下,不同的窗口 sessionStorage 中的数据不能共享,就是说打开一个窗口已经登录了,在浏览器中在开一个窗口还得重新登录,这就不能忍了

于是,就想成功后,将 jwt 存到 cookie 中,这个后端和前端都可以做


// login
exports.user_login = async function (req, res, next) {
    ...
const user = ret[0]
const token = generateJWT(user)
    // express 要引入 cookie-parse
    res.cookie("token", token, { maxAge: 30 * 60 * 1000, httpOnly: true}) // httpOnly 为 true,js 脚本就不能访问了
    res.json({
        code: 100,
        message: '登录成功'
    })
}

返回头就会有 set-cookie 这个字段了

以后每个请求头里面都会自带 cookie 了

express 接收 cookie:req.cookies.token

正文完
 0