session和token node(express)+vue

session和token

1.node所需session的插件和配置

cookie-parser -S
express-session -S

• 下载后然后在app.js引入插件

• 接着配置session的基本信息 储存时长

//设置 session中间件   --- 必须写在路由中间件前面  用来保存用户登陆后的数据 
app.use(session({
  name: "AppTest",
  cookie: { maxTime: 1000 * 60 * 24 },  //设置 session时长为一天
  secret: "test",
  resave: false,
  saveUninitialized: true //是否进行非初始化保存
}))

2.用户登陆成功后

• 用户登陆成功后 后端通过(加密)数据返回一个token给前端，前端拿到后存到本地的sessionStorage

• 后端把登陆成功的用户信息和token存到session，以便后面前端每一次请求发送的token和后端存进的用户token来判断用户的登录状态 见：例子1

3…前端token的发送

• 然后在axios的封装里面设置请求头带上token
  ##设置请求头

//在封装的axios里面设置请求头，让请求带上token发送到服务器
//设置请求头里面的token  
let token = ""
axios.defaults.headers.common['token'] = token;
//设置提交文档类型的编码
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

• 接着设置token ，在请求拦截器里面获取本地存进去的token

// Add a request interceptor  添加一个请求的拦截器(可写请求前的业务逻辑)
axios.interceptors.request.use(function (config) {
    // 请求发送之前设置请求头的 token
    token = sessionStorage.token || token
    config.headers.token = token
    console.log(config); //请求url
    return config;

}, function (error) {
    // Do something with request error
    failLoading("请求失败" + error)
    return Promise.reject(error);
});

• 附响应拦截器代码

// Add a response interceptor   添加一个响应的拦截器(服务器响应数据到客户端以前)
axios.interceptors.response.use(function (response) {
    // Do something with response data
    setTimeout(() => {
        if (response.data.type === 1) {
            successLoading(response.data.msg || "请求成功")
        } else {
            if (response.data.type === 0) {
                failLoading(response.data.msg || "请求失败")
            } else {
                successLoading(response.data.msg || "请求成功")
            }
        }
        //token不存在或者失效直接跳转login
        if (response.data.code === 3000) {
            router.push({ name: "login" })
        }
    }, 1000)
    return response;

}, function (error) {
    failLoading("响应失败" + error)
    return Promise.reject(error);
});

3.node接收请求头传来的token

• 首先模块化暴露一个token 拦截的中间件checkToken
  然后在app.js里面的路由之前设置拦截器

app.use(checkToken)
app.use('/vue', vueRouter)  //vue路由别名

• node里面前后端token的获取方式

    const client_token = req.headers.token  //前端token
    const server_token = req.session.token  //后端token

• 然后对比前后端token是否一样判断是否登录
  例子1：

exports.checkToken = function (req, res, next) {
    const client_token = req.headers.token  //前端token
    const server_token = req.session.token  //后端token
    console.log("前端token=" + client_token);
    console.log("后端token=" + server_token);
    // 登陆注册是没有token的 ，因此不需要带token
    if (req.path !== "/vue/login" && req.path !== "/vue/register") {
        if (client_token) {
            if (server_token) {
                if (client_token == server_token) {
                    next()
                } else {
                    res.json({
                        code: 3000, //3000表示未登录
                        type: 0,
                        msg: "token对比失败，请重新登陆"
                    })
                }
            } else {
                res.json({
                    code: 3000,
                    type: 0,
                    msg: "token超时，请重新登陆"
                })
            }
        } else {
            res.json({
                code: 3000,
                type: 0,
                msg: "token不存在，请重新登陆"
            })
        }
    } else {
        next()
    }
}

• 学上党，个人笔记