前端 nuxt创建唯一标志,生成前端session

414 阅读1分钟

一、nuxt相关的写法:

1、根目录下新建middleware文件夹。
2、文件夹中新建client_token.js文件。
3、nuxt.config.js中的router配置项下添加middleware:['client_token']。

二、vue相关的写法:

1、npm install --save js-md5
2、在client_token.js中引入md5插件 import md5 from 'js-md5';
3、获取对应的参数(因为是nuxt项目,要确保这些参数不管在客户端还是服务端都能获取到)
4、将这些参数拼接,进行MD5加密得出32位字符的唯一标志


贴上核心代码

import md5 from 'js-md5';
export default function ({
  $cookies,
  req
}) {
  let clientToken = ''
  let maxTime = 60 * 60 * 24 * 7 // 7天时间
  if ($cookies.get('clientToken')) {
    clientToken = $cookies.get('clientToken')
  } else {
    // 创建clientToken并保存
    const reqObj = req.headers
    const UA = reqObj['user-agent']
    const referer = reqObj['referer']
    const host = reqObj['host']
    const time = new Date().getTime() // 获取当前时间戳
    const Rand = Math.random()
    const random = Math.round(Rand * 100000000) // 随机数
    
    const customCT = UA+referer+host+time+random

    // MD5加密后得出32位字符
    clientToken =md5(customCT)

    $cookies.set('clientToken', clientToken, {maxAge: maxTime}) //保存7天
  }

}