token和本地存储

原创已于 2023-03-04 09:32:08 修改 · 511 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #vue.js

收录于

于 2023-03-03 19:28:00 首次发布

本文介绍了在前端开发中如何使用JavaScript和Vue.js进行Token的存储和管理。通过localStorage实现永久缓存Token，方便接口调用，同时讲解了获取、删除和清空localStorage数据的方法。而sessionStorage则提供会话级别的缓存，当浏览器关闭时，存储的数据会消失。

在接口文件API中

const jwt = require('jsonwebtoken')


//获取token:安装jsonwebtoken模块:npm install jsonwebtoken
//导入模块:const jwt = require('jsonwebtoken')
//http://localhost:3000/api/goods/token
router.post('/token',(req,res)=>{
    let ins = req.query.btn_info
    console.log('req.query.btn_info：',req.body.btn_info)
    res.json({
        code:200,
        //sign:第一个参数:为生成保存用户自己信息;第二个参数screct密钥;第三个参数为过期时间以秒为单位(60*60就是60分钟)
        token: jwt.sign({ins},'wodejiamishuju',{expiresIn:60*60})
    })
})

设置本地存储

localStorage.setItem('token',res.token)//将token保存在localStorage中

获取本地存储

localStorage.getItem('token')//将获取本地缓存

删除一条数据

localStorage.removeItem('token')

清除所有数据

localStorage.cleae()

localStorage 永久缓存，除非手动删除

sessionStorage 会话缓存，关闭浏览器就没有了