春风得意马蹄疾
一日看尽长安花

保存用户信息jsonwebtoken使用方法总结

假设需要保存用户登录后的账户名称


后台

1、连接数据库
2、使用express框架,并配置路由
3、判断请求类型,如果是注册register请求,直接对请求数据处理,插入到数据表中
4、如果是登录login请求且在数据库中查询到用户信息,则需要使用jsonwebtoken的加密方法对查询结果加密并返回给前端

  • 生成token.
    const token=JWT.sign(
    {account:result.account}, //result为从数据库查询到的结果
    "hello world",//混入字符
    "7d" //设置过期时间
    )
  • 保存token,将token返回给前端
    res.json({code:0,message:'ok'},data:{token})

5、如果是检查登录是否过期或者查询用户信息的请求,则需要使用中间件,判断用户是否需要重新登录

router.use(async (req,res,next)=>{
    try {
        //获取前端设置的请求头,即用户登录成功后保存的token值(加密后的)
        const token = req.headers["authorization"].replace("Bearer","");
        //对token值进行解密检查是否过期
        const result = JWT.verify(token,config.token_key);
        //未过期则通过解密后的token值查询数据库
        const userInfo = await User.findOne(
            {account:result.account},
            {password:false}
        );
        //将用户信息动态添加到请求体中,这样后面的路由可以直接拿到用户信息
        req.userInfo=userInfo;
        //进入下一个路由
        next();
    }catch(error){
        //如果try中的步骤有错误则说明没有token或者已过期,需要重新登陆
        res.json({
            code:-1,
            message:'请重新登录'
        })
    }
})

前端

1、发送登录请求后,如果账户与密码无误,则会收到后台返回的token值,即加密后的账户account名称,将token值保存到本地缓存localStory中

async login(){
     //发送请求并将结果赋值给data
     const data = await http.post(api.LOGIN_API,{
     account:this.account,
     password:this.password
      });
      //获取请求结果中的token值
     localStorage.setItem("token",data.token);
     //登陆成功后跳转到首页
     this.$router.push('/')
 }

2、使用axios的请求拦截器方法,拦截所有发送的请求,将请求头的Authorization(认证)设置为token,再发送出去,token过期时,则会收到需要重新登录的响应(后台步骤5)

instance.interceptors.request.use(
            (config)=>{
               //获取本地缓存中的token值
                const token=localStorage.getItem("token");
                //如果有token值,设置请求头
                if(token){
                    config.headers.Authorization=
                    "Bearer"  + localStorage.getItem("token")
                }
                return config
            },
            (error)=>{
                return Promise.reject(error);
            }
        )
Like
Like Love Haha Wow Sad Angry
11
赞(0) 打赏
未经允许不得转载:栗子纪blog » 保存用户信息jsonwebtoken使用方法总结
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x