最近一直在使用 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