重定向

重定向

1 前言

这节需要一些 HTTP 协议的知识，如果对 HTTP 协议不了解的可以先看看 MDN 关于 HTTP 介绍。
常见的跳转有 Res location 和 Res redirect，状态码有 301 ，302 ，这节我们一起学习在 Koa 中常见各种跳转重定向功能。
我们先先考虑一个常见的场景，用户进入首页，后端发现没有登陆，自动跳转登陆页，输入用户名，密码后，自动跳转到首页，后面我们围绕着解决这个问题展开，大家可以先把本章 Demo 源码拉下来，运行起来感受下（Demo 地址在小结里）。

2 原理

在 HTTP 协议中，重定向操作由服务器通过发送特殊的响应（即 redirects）而触发。HTTP 协议的重定向响应的状态码为 3xx 。
浏览器在接收到重定向响应的时候，会采用该响应提供的新的 URL ，并立即进行加载；大多数情况下，除了会有一小部分性能损失之外，重定向操作对于用户来说是不可见的。

3 302 vs 301

这个 2 个状态码我们经常看到，简单说就是 302 是临时重定向，301 是永久重定向，我们开发过程中常用 302
二者差别可以查看 MDN文档

4 ctx.response.redirect(url, [alt])

Koa 重定向主要是用到 ctx.response.redirect 这个 api，它的状态码默认是 302，它有以下几种用法：

ctx.redirect('back'); // 相当于浏览器起的 回退
ctx.redirect('back', '/index.html'); // 回退某个目标页
ctx.redirect('/login'); // 重定向到 登陆路由
ctx.redirect('http://google.com'); // 重定向到地方网页

如果你想走 301 永久重定向，需要如下设置：

ctx.status = 301;
ctx.redirect('/cart');
ctx.body = 'Redirecting to shopping cart';

接下来，我们就用一个登陆的实例来讲解应用

5 登陆跳转实例

首先我们访问首页，判断是否登陆，没有登陆，跳转到登陆页，反之进入首页。

// router.js
router.get('/', async (ctx, next) => {
    if(!ctx.app.userInfo){ // 这里判断是否已经有了 userInfo 没有就直接跳转到 登录页
        ctx.redirect('/login')
        return
    }
    let title = 'hello koa2'
    await ctx.render('index', {
        title,
    })
});
// 这里处理渲染登录页面
router.get('/login', async (ctx, next) => {
    if(ctx.app.userInfo){
        ctx.redirect('/')
    }
    await ctx.render('login', {
        title: 'login',
    })
});

上面这段代码就实现我们需要的功能。

接下来我们看看登陆页面:

// view/login.ejs
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
    <link href="./index.css" rel="stylesheet">
</head>
<body>
    <h1><%= title %></h1>
    <img class="img" src="./koa.jpg">
    <form  action="/login" method="POST" enctype="application/x-www-form-urlencoded">
        姓名: <input name="userName" id="userName">
        密码：<input name="passWord"  id="pass" type="password">
        <button id="loginButton" type="submit">登录</button>
    </form>
</body>
</html>

这样用户跳转到登陆页，输入用户名密码，在服务端做校验，代码如下：

// rouer.js
const { login } = require('./controller/login')
router.post('/login', login);
// controller/login.js
function login(ctx) {
    const token = '121212-45dfgffgfg'
    console.log('ctx.res.header', ctx.response.header)
    ctx.response.header.token =  token
      // 下面这个段可以理解成cookie，标记用户登陆了
    ctx.app.userInfo = {
        name: '王二码字'
    }
    ctx.redirect('/')
}
module.exports = {
    login
}

这样就完成了我们的检测用户是否登陆，登陆跳转的逻辑。

以上就是跳转的一个实际案例，大家可以好看看，在日常工作中，应用还是非常多的

6 小结

这节我们讲解了重定向常用方式,大家可以好好理解下，具体案例 Demo github地址。

Koa-Wiki

8.重定向