介绍常见的登录功能实现方式。

目录

  1. 使用token
  2. 使用cookie
    1. 示例

常见的两种方式。

  1. 使用token

    客户端把username和password,提交到服务端的登录api。

    服务端验证正确后,生成一个token,并把token和userId,存在缓存里(推荐redis数据库),然后把token返回给前端。

    前端每次的请求头中带token,这样就能够轻松的实现。

  2. 使用cookie

    客户端发送username和password到server。

    server验证成功后, 写入cookie到客户端,返回200的response,其中cookie的key要存储在redis中,value就是用户信息,并且要设置key的超时时间,如:60分钟。

    client收到200后,进行相应的业务操作,并且设置以后每次请求server都会自动带上cookie, 不用你写代码

    server端的filter(你肯定用filter来实现)中会每次验证传过来的cookie的key在redis中是否存在, 有就代表登录成功过可以操作, 没有就返回错误标识注意: 在登录成功后, 每次调用服务器接口时候, 都要为redis的key进行续期,如60分钟

    当redis的key超过60分钟, 自己会删除这个key, 那么再次请求server时, 就会收到需要登录的返回值

    当用户主动退出系统的时候, 也要在server中删除redis的key。

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    // webpack.dev.config.js

    var host = 'devtk.aibeike.com'
    var backendPort = 443

    // 后台登录接口配置
    var options = {
    hostname: host,
    port: backendPort,
    path: '/entrance/login',
    method: 'POST',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': postData.length
    }
    }

    // 当前cookie
    var currentCookie
    // 上次请求时间纪录,每8分钟重新登录一次,后台设置cookie时效为10分钟
    var lastRquestTime = 0

    var setCookie = function(cb) {
    if (Date.now() - lastRquestTime >= 4 * 60 * 1000) {
    var req = https.request(options, (res) => {
    res.setEncoding('utf8')
    res.on('data', (chunk) => {
    console.log(`BODY: ${chunk}`);
    })
    res.on('end', () => {
    currentCookie = res.headers['set-cookie'][0]
    lastRquestTime = Date.now()
    console.log('cookie 获取成功:' + currentCookie + ' cookie获取时间为:' + lastRquestTime)
    cb()
    })
    })
    req.on('error', (e) => {
    console.log(`problem with request: ${e.message}`)
    })
    // write data to request body
    req.write(postData)
    req.end()
    } else {
    cb()
    }
    }
    setCookie(function(){})

    // 在webpack的配置中设置
    proxy: {
    '/': {
    target: `https://${host}:${backendPort}/`,
    changeOrigin: true,
    onProxyReq: function(proxyReq, req, res) {
    proxyReq.setHeader('Cookie', currentCookie)
    }
    }
    }