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

// loginexports.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            }        })  }}// 生成 jwtfunction 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 中,这个后端和前端都可以做

// loginexports.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