day19（tooken存储）

一：tooken

jsonwebtoken—一段由后端生成的加密字符串（保存的是我们的登录状态）

1·1：tooken的使用流程

• 服务器端生成一段token 并且由我们的http请求 发送给前台 前台保存起来
• 前台每次需要验证登录状态的时候 前台需要把这个保存起来的token拿出来 然后一起携带发送给后台
• 后胎得到这个token解密 得到之前的登录状态 并且返回给前段是否登录的标识

1·2：tooken的使用

• 下载：npm install --save jsonwebtoken

• 前台使用tooken的时候使用的技术点【保存token :本地存储 ajax】

• 后台使用tooken的时候使用的技术点【生成token，解析token】

  生成tooken：sign(加密的数据，秘钥 / 私钥 / 加密密文 你随便写一段越乱越好的字符串)

  解析tooken：verify(“你要解密的token”，秘钥 / 私钥 / 加密密文 ，回调)

1·3：tooken的实际使用

1·3·1：后端生成一个tooken，并将这个tooken发送给前端

.then((ok) => {
     
        if (ok.length == 0) {
     
            //登录失败
            res.send({
      "msg": "登录", data: {
      slogn: 0 } })
        } else {
     
            //登录成功
            // 登录成功的时候就要生成一个tooken，并将这个tooken发送给前台
            //需要加密的是slogn
            let useok = {
     
                slogn: 1
            }
            let mi = "askdshshnsusjsiwiejqwisdjshfsiqodjwhdi"
            let tooken = jwt.sign(useok, mi)
            console.log(tooken)
            //将生成的tooken发送给前端[同时生成一个slogn]
            res.send({
      "msg": "登录", data: {
      tooken,slogn:1 } })
        }
    })

1·3·2：前台进行判断，如果登录成功就将后端生成的tooken存储到本地存储里

 postlink("/api/denglu/denglu", usp).then((ok) => {
     
        console.log(ok);
        if(ok.data.data.slogn==0){
     
          //登陆失败
          this.name="",
          this.pwd=""
          alert("请重新输入您的相关信息")
        }else{
     
        //登录成功的时候，将接受到的tooken存储到本地存储里
          window.localStorage.setItem("tooken",ok.data.data.tooken)
          this.$router.push("/home")
        }
      });

1·3·3：在路由守卫里判断tooken是否存在，存在将就将该tooken发送给后端

让后端判断是不是就是传过去的tooken。

   beforeEnter(to, from, next) {
     
      console.log(window.localStorage.getItem("tooken"))
      if (window.localStorage.getItem("tooken") == null) {
     

        alert("请您先注册，才可以使用")
        next("/zhuce")
      } else {
     
        //要是本地存储里有tooken，将其发送给后端判断该tooken是不是就是后端发送过来的tooken值
        let localtooken = window.localStorage.getItem("tooken")
        let usp = new URLSearchParams()
        usp.append("tooken", localtooken)

        postlink("/api/home/yanzheng",usp).then((ok) => {
     
          console.log(ok)
            
            if(ok.data.data.slognok==1){
     
                 alert("尊贵的vip大大")
       			 next()
            }
            else{
     
                alert("不要想着白嫖")
            }
        })
          
          
       
      }

    }

1·3·4：后端在对前端传过来的tooken进行判断，是否是后端传过去的路由

// 对前端传过来的路由进行判断，解析是不是就是后端传过去的tooken
let express=require("express") 
let router=express.Router()

//post请求需要使用的插件
let bodyParser=require("body-parser")
let uE=bodyParser.urlencoded({
     extended:false})

// tooken使用的插件
let jwt=require("jsonwebtoken")

router.post("/yanzheng",uE,(req,res)=>{
     
        let posttoken=req.body.tooken
        let mi = "askdshshnsusjsiwiejqwisdjshfsiqodjwhdi"
        // 对数据进行解密
        let usedata=jwt.verify(posttoken,mi)
        console.log(usedata.slogn)
        if(usedata.slogn==1){
     
            res.send({
     msg:"修改接口",data:{
     slognok:1}})
        }else{
     
            res.send({
     msg:"修改接口",data:{
     slognok:0}})
        }    

})
module.exports = router

二：图片的上传

第一步：配置后端的服务

下载第三方插件multer

let multer=require("multer")
let storage = multer.diskStorage({
     
    //destination  就是配置我们上传之后的图片资源路径 
    destination:(req,file,cd)=>{
     
        cd(null,"./img")
    },
    filename:(req,file,cd)=>{
     
    //filename  图片保存的名字[创建一个为img的文件夹]
     let lastname=file.originalname.split('.')[1]
     let imgname=new Date().getTime()
        cd(null,`${
       imgname}.${
       lastname}`)
    }
})
let upload = multer({
     
    storage
})
router.post("/upload",upload.single("upimg"),(req,res)=>{
     
    res.send({
     msg:"我是图片上传的接口"})
})

第二步：配置前端服务

方法一：通过form表单进行上传

 <form
      action="http://localhost:3000/home/upload"
      method="post"
      enctype="multipart/form-data"
    >
      <input type="file" name="upimg" />
      <input type="submit" value="表单上传图片" />
 </form>

方法二：通过ajax请求进行上传

<input type="file" ref="imgfile">
<button @click="fun()">点我通过ajax的方式上传图片</button>

import {
     imgpost} from "@/api/imgapi.js"
fun(){
     
        // 得到当前图片
        console.log(this.$refs.imgfile.files[0])
        let el= this.$refs.imgfile.files[0]
        //  创建出图片上传对象  formdata对象
        let formdata=new FormData()
        
        formdata.append("upimg",el)

        imgpost("/api/home/upload",formdata).then((ok)=>{
     
          console.log(ok)
        })
    }
  }

ajax请求：

import service from "@/util/service.js"
export function imgpost(url,img){
     
    return new Promise((resolve,reject)=>{
     
        service.request({
     
            url,
            method:"post",
            data:img     
        }).then((ok)=>{
     
            resolve(ok)
        }).catch((err)=>{
     
            reject(err)
        })
    })
}

vice.request({
url,
method:“post”,
data:img
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
}