写给大忙人看的鉴权

const Koa = require("koa");

const Router = require("koa-router");

const koaBody = require("koa-body");

const sta = require("koa-static");



let app = new Koa();

let router = new Router();



app.use(koaBody());

app.use(sta(__dirname+"/static"));



router.get("/login",ctx=>{

    ctx.body = "hello world"

});

router.post("/checkUser",ctx=>{

    console.log(ctx.request.body);

    ctx.body = "有请求";

});



app.use(router.routes());

app.listen(8080);

浏览器反馈

终端反馈

从反馈我们可以看到，数据是可以拿到的，但是类型是字符串，所以我们去设置一下头部信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

终端反馈

可以看出，设置完头部信息后，我们获得到的类型变成了对象

现在后端接收到数据后，我们去做一个登录验证，验证通过就签发token

签发秘钥时有一个很好的依赖，比较推荐，也可以自己写，但是需要一定的代码量的

const jwt = require("jsonwebtoken");    //签发



router.post("/checkUser",ctx=>{

    console.log(ctx.request.body);



    let {username,pwd} = ctx.request.body

    let info;

    if(username === "张三" && pwd === "123"){

        // 验证成功,签发token

        const token = jwt.sign({

            _id : 1

        },"mytoken",{expiresIn:"2h"});

        /*

			需要三个参数 

			1. 传递信息 是一个对象，描述用户信息 

			2. 秘钥 

			3. token值得时效性

				(token的一个缺点，一旦设置后就不可以改变，所以时效性越短，风险性越低)

		*/



        info = {

            message : "正确",

            status : 1,

            token

        }

    }else{

        info = {

            message : "错误",

            status : 0

        }

    }

    

    ctx.body = info;

});

浏览器反馈

我们可以看出token的返回值是一长串我们看不懂的代码，这里给大家推荐一个网站可以查看token的返回值

网站：jwt.io

从上图我们可以看出，秘钥分为三部分

1. 头部信息

2. 字段内的内容

3. 密码

所以我们说它是两端明文一段密文组成的

然后这个数据类型其实很难受，因为这里有三个东西，第一个是用户提示，第二个状态码，第三个才是我们需要的token，然后我们可以这样简单的做一个处理

		xhr.onload = function(){

            console.log(xhr.responseText);

            let token = JSON.parse(xhr.responseText).token;

            localStorage.setItem("token",token);

        };

浏览器反馈

回顾一下我们上边都做了些什么 ----> 去服务端验证一下，然后从服务端回来给我们签发了token并且我们把它存在了本地存储里。

按照正常的业务逻辑，这时，拿到客户端存储的token并且进行一个跳转就可以了

	// 需要认证的数据：头部携带token，请求接口

    document.querySelector(".btn").onclick = function(){

        let xhr = new XMLHttpRequest();

        xhr.open("post","/apiCheck",true);



        let token = localStorage.getItem("token");

        if(token){

            xhr.setRequestHeader("Authorization","Bearer " + token) // Bearer后边一定要加空格！！！

        }

        xhr.onload = function(){

            console.log(xhr.responseText);

        };

        xhr.send();

    }

前端跳转实现后我们需要到后端去验证一下，验证我们和签发一样同样也可以去通过原生去写，但是不推荐，因为需要一定代码量，所以我们需要一个依赖

const koajwt = require("koa-jwt");      //验证



// 需要token认证的接口

router.post("/apiCheck", koajwt({ secret: "mytoken" }), ctx => {

    // 签发的密码和验证的密码不一致，则验证不通过

    // 验证token 两个明文一个密文，明文没什么好查的，直接验证密文，因为密文里边就是密码，明文里边有时可能还会有数据

	ctx.body = {

        name: "我是神秘接口来的"

    }

})

注意点：

jwt 和 koajtw 都不需要是有app.use()来加载，直接使用！！！

const jwt = require("jsonwebtoken");    //签发

const koajwt = require("koa-jwt");      //验证



#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/485cba0dfaa973c58d8f8edb73ca2dea.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/69b194c8277689a4fb5f28a71c8d0cf3.png)

![](https://img-blog.csdnimg.cn/img_convert/ed47dfc28b7e38d341f1832e52ede73b.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
[外链图片转存中...(img-l0ABmHq7-1715833893107)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**