【Koa】（用实例带你一步步理解）：实现不同用户只能访问特定的页面--谈谈Koa的中间件Middleware

前言

此例子主要实现的效果:
1.没有进行账号密码的验证是无法正常跳转到其他页面
2.不同的用户登录之后所访问的页面是不同的，即用户A登录之后可以访问userlist页面；而用户B登录之后是无权限访问userlist页面。

在实际应用中我们常常会碰到类似这样的例子，例：我们每个人在同一登录页面登录之后所跳转的个人页面是包含自己个人信息的页面，而不是包含张三或李四个人信息的页面。

想要实现上面的效果，我们就需要用到koa的中间件Middleware来进行页面跳转的用户判断、“拦截”。

一、效果图1与代码实现

用户没有进行账号密码的验证就手动输入路由去访问特定的页面（不可行），会自动帮你跳转到登录页面，引导用户要先进行账号密码的验证才能实行其他操作

步骤

1.需另新建一个Middlewares文件夹来放不同的Middleware中间件

//login.js
module.exports = {
    loginstats:async(ctx,next)=>{
    //判断是否有name值
        if(!ctx.session.name){
            ctx.response.redirect("/users/login");
        }else{
            await next();
        }
    }
}

2.在user.js文件导入所定义好的中间件

//users.js
const loginMiddleware = require("../../middlewares/login")

//users.js
router.prefix('/users')

router.get('/login', async (ctx, next) => {
  await ctx.render('login', {
  })
})

router.post('/checklogin', async (ctx, next) => {
  let {username,password} = ctx.request.body;
  if(username == 'tom' && password == '123'){
    // ctx.body = {success:true,msg="登陆成功"}
    ctx.session.name = username;
    ctx.response.redirect("/users/userinfo")
  }else if(username == 'jack' && password == '123'){
    ctx.session.name = username;
    ctx.response.redirect("/users/userinfo")
  }else{
    // ctx.body = {success:false,msg="账户密码错误"}
  }
})


//在此处插入Middleware中间件，调用刚刚导入的login.js来判断用户是否已成功登录，
//若没有则不能会跳转到用户登录页面，而不是继续往下执行。
router.all('*',loginMiddleware.loginstats)

router.get('/userinfo', async (ctx, next) => {
  await ctx.render('users/userinfo', {
    message:"登录成功",
    name:" "+ctx.session.name
  })
})

二、效果图2与代码实现

当用户tom输入账号和密码登录成功之后，手动输入访问userlist页面的路由可正常访问userlist页面

跳转userinfo页面

此时当用户tom输入userlist路由，想访问userlist页面是成功的

若是jack用户登录之后想要访问userlist页面则是失败的，无权限的

用户jack输入访问userlist页面的路由，由于被设定无法访问，则跳转一个“无权限访问”的页面

步骤

1.同样需要定义好另一个Middleware中间件

//auth.js
module.exports = {
    checkauth:async(ctx,next)=>{
    //判断用户如果不是tom，则会跳转到nopath页面，如果是tom，则正常往下执行。
        if(ctx.session.name != 'tom'){
            ctx.response.redirect("/users/nopath");
        }else{
            await next();
        }
    }
}

2.导入刚刚定义好的中间件

//users.js
const authMiddleware = require("../../middlewares/auth")

router.prefix('/users')

router.get('/login', async (ctx, next) => {
  await ctx.render('login', {
  })
})

router.post('/checklogin', async (ctx, next) => {
  let {username,password} = ctx.request.body;
  if(username == 'tom' && password == '123'){
    // ctx.body = {success:true,msg="登陆成功"}
    ctx.session.name = username;
    ctx.response.redirect("/users/userinfo")
  }else if(username == 'jack' && password == '123'){
    ctx.session.name = username;
    ctx.response.redirect("/users/userinfo")
  }else{
    // ctx.body = {success:false,msg="账户密码错误"}
  }
})

router.all('*',loginMiddleware.loginstats)

router.get('/userinfo', async (ctx, next) => {
  await ctx.render('users/userinfo', {
    message:"登录成功",
    name:" "+ctx.session.name
  })
})
router.get('/nopath', async (ctx, next) => {
  await ctx.render('nopath', {
    message:"无权限访问"
  })
})

//在此处插入Middleware中间件，调用刚刚导入的auth.js来判断用户是否是tom，
//若不是tom则手动输入userlist页面路由是不能实现正常访问的，是会跳转到nopath页面。
//若是tom，则会正常往下执行，即访问userlist页面。
router.all('*',authMiddleware.checkauth)

router.get('/userlist', async (ctx, next) => {
  await ctx.render('users/userlist', {
  })
})

总结

举此例子，简单地来说，Koa的Middleware中间件可用于设定不同用户访问特定的页面。
步骤提炼：定义中间件并导出=>引入中间件=>使用中间件

以上是我个人学习这块知识的个人理解，如有错误，请评论区提出批评指正！多多指教！
今后会继续分享关于Vue.js、Node.js等知识干货，大家一起交流学习~