关于cookies,session,token的使用

关于cookies,session,token的使用

可以使用postman测试数据！

• cookies的使用

  // 把请求头中的cookie解析到req.cookies中
  var cookieParser = require('cookie-parser');
  app.use(cookieParser());
  
  //获取cookie
  //在服务端获取cookie：当浏览器保存了cookie之后，再次请求的时候，会自动把cookie放在请求头中发送给服务端
  //方式一：req.headers.cookie(这样获取的cookie只是字符串)
  //方式二:通过cookie-parser获取,req.cookies(获取的cookies是对象)
  
  app.get('/login',(req,res)=>{
  //设置cookie
  //方式一
  // res.setHeader('Set-Cookie','username=Tom,age=12');
  //方式二
   res.cookie('username', req.query.username,{
        // maxAge 设置cookie的有效期，时间单位是毫秒，有效期：可以理解为保质期
        // 1、没有设置有效期的cookie就没有保质期，cookie的有效时间是从创建cookie到浏览器关闭
        // 2、设置了有效期的cookie就做持久化cookie，及时关闭了浏览器，浏览器依然会保存cookie直至过了有效期
        maxAge: 1000*60*60,
      });
      res.redirect('/')
  })
  
  // 退出登录
  app.get('/logout', (req, res)=>{
    // 删除cookie
    res.clearCookie('username');
    res.redirect('/');
  });

• session的使用

 //默认Session数据时内存储数据，服务器一旦重启，真正的生产环境会把Session进行持久化存储。
  //配置
  var session=require('express-session')
  var md5 = require('blueimp-md5');
  //该插件会为req请求对象添加一个成员:req.session默认是一个对象
  //这是最简单的配置方式
  //Session是基于Cookie实现的
  app.use(session({
    //配置加密字符串，他会在原有的基础上和字符串拼接起来去加密,使用md5(xxxx)的形式加密
    //目的是为了增加安全性，防止客户端恶意伪造
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,//无论是否适用Session，都默认直接分配一把钥匙
    cookie: { secure: true }
  }))
  
  //使用
  // 读
  //添加Session数据
  //session就是一个对象
  req.session.foo = 'bar';
  
  //写
  //获取session数据
  req.session.foo
  
  //删
  req.session.foo = null;
  delete req.session.foo

• token的使用

 //在SPA页面上，可以用token和路由导航守卫来阻止用户在URL地址输入直接跳转到有权限的页面

  token.js
  //1.安装jwt(jsonwebtoken)
  //2.使用jwt中的两个方法来加密和解密token
  const jwt=require('jsonwebtoken');
  Token={
      en(str){//加密token
          let tokenKey=jwt.sign(str,'apache');
          return tokenKey;
      },
      de(token){//解密Token
          try{
              let tokenKey=jwt.verify(token,'apache');
              return {
                  status:'success',
                  tokenKey
              }
          }
          catch{
              return{
                  status:'failed'
              }
          }
  
      }
  }
  module.exports=Token;

  app.js
  const express=require('express');
  const app=express();
  const Token=require('./token');
  //注册
  app.post('/',(req,res)=>{
      let {username,password}=req.query;
      //模拟进行了数据库的操作
      let id='6FGK908P1MK';
      let tokenKey=Token.en(id);
      return res.send({
          msg:'操作成功',
          status:200,
          tokenKey
      })
  })
  //登录
  app.get('/',(req,res)=>{
      let {TokenKey} =req.query;
      let data=Token.de(TokenKey);
      return res.send({
          msg:'数据操作成功',
          status:200,
          data
      })
  })
  app.listen(3000,()=>{
      console.log('服务器3000...')
  })
  //上面的例子中注册时，就返回token了，实际开发中应该是下面的方式
  -用户注册时，先把用户名和密码添加到数据库，然后会生成一个Id
  -用户登录时，判断用户名和密码，然后使用加密字符串和id返回给用户一个token，然后客户端将token存放到sessionstorage中
  -用户访问权限页面时，就把sessionstrage中的token放到headers中

  Login.vue
  	//使用了Elment-UI中的表单组件
  	methods:{
             login(){
              //判断是否可以成功提交表单   
              this.$refs.loginFormRef.validate(async valid=>{
                  if(!valid) return;
                  const {data:res}=await this.$http.post("login",this.loginForm);
                  if(res.meta.status!==200) return this.$message.error('登录失败！');
                  this.$message.success('登录成功！');
                  //1. 将登录成功之后的token，保存到客户端的sessionStorage中
                  //1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
                  //1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
                  window.sessionStorage.setItem("token",res.data.token);
                  //2.通过编程式导航跳转到后台主页，路由地址是/home
                this.$router.push("/home");
              })
        }
      }