vue+koa+mysql 企业管理后台

1、跨域session失效问题
原因:跨域请求,默认不让携带cookie,因此在服务端获取不到设置的session(同为get请求可以获得,同为post可以获得,但是在get下设置的session,在post里面获取不到)
解决办法:
在vue前台请求拦截器中设置withCredentials = true

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  config.withCredentials = true // 跨域請求帶上cookie
  return config
}, error => {
  console.log('lan')
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

在koa后台设置跨域参数

const cors = require('koa2-cors');

app.use(cors({
    origin: function (ctx) {        
        return 'http://localhost:9528';//前台请求地址
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

2、使用jwt进行登录验证,anthorization error 401
错误原因:先进行jwt验证在进行跨域处理,正确的顺序应该是先进行跨域处理然后进行验证处理和jwt处理

npm i jsonwebtoken --save
npm i koa-jwt --save

const err = require('./middlreware/error');

//错误处理文件 error,js
const jwt = require('jsonwebtoken')
const config = require('../config/config')
const util = require('util')
const verify = util.promisify(jwt.verify)

/**
 * 判断token是否可用
 */
module.exports = function () {
    return async function (ctx, next) {
        try {
            const token = ctx.header.authorization  // 获取jwt
            if(token) {
                let payload
                try {
                    payload = await verify(token.split(' ')[1], config.session.sign)  // 解密payload,获取用户名和ID
                    ctx.user = {
                        name: payload.name,
                        id: payload.id
                    }
                } catch (err) {
                    console.log('token verify fail: ', err)
                }
            }
            console.log(`token: ${token}`)

            await next()
        } catch (err) {
            if (err.status === 401) {
                ctx.body = {
                    code: -1,
                    message: '认证失败'
                }
            } else {
                err.status = 404
                ctx.body = '404'
                console.log('不服就是怼:', err)
            }
        }
    }
}


//下面两步处理要放在跨域处理下
app.use(err())
app.use(jwtKoa({secret: config.session.sign}).unless({
    path: [/^\/api\/login/,/^\/api\/login\/getCaptcha/] //数组中的路径不需要通过jwt验证
}))

你可能感兴趣的:(js,前端,vue,nodejs)