Vue、Express与cookie初探

经过了一段时间的vue学习，最近试着用vue+Express做了一个用户注册登录的小项目。在涉及到cookie时遇到了不少的麻烦，下面记录我自己解决问题的过程。

vue与cookie

在vue中我们可以使用vue-cookie插件来设置cookie。先安装并在vue中引用它，之后就可以用this.$cookies来操作cookie了。

// 设置cookie
this.$cookies.set(keyName, time)
// 获取cookie
this.$cookies.get(keyName)
// 删除cookie
this.$cookies.remove(keyName)
// 查看cookie是否存在
this.$cookies.isKey(keyName)
// 获取所有cookie
this.$cookies.keys()

但是当我们设置好cookie并把它发送到服务端后，却发现服务端并没有接受到我们的cookie。原因是vue-axios默认是不携带cookie的，如需要携带cookie，则需要设置：

import axios from 'axios'
import VueAxios from 'vue-axios'

// 让axios携带cookies
axios.defaults.withCredentials = true
Vue.use(VueAxios, axios)

这样服务端就可以接收到我们发送的cookie了。

Express与cookie

在express中我们需要用cookie-parser中间件来操作cookie，具体参考其文档。

在前端访问服务端时，经常会发生跨域的问题。跨域问题在express只需要一个cors中间件就可以解决。

const cors = require('cors')
app.use(cors())

当不设置cookie时，这样是没有问题的，可当我在web端设置了cookie后，跨域问题就又出现了。原来cookie也存在跨域传递问题，此时应该设置：

const cors = require('cors')
const corsOptions ={
  origin: 'http://localhost:8080',  // web域
  credentials: true
}
app.use(cors(corsOptions))

如果不使用中间件也可以这样来设置：

app.all('*',function(req, res, next) {
    // *号为来源，需要显式设置来源,不能写*
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Credentials",true);
    //带cookies
    res.header("Content-Type", "application/json;charset=utf-8");
   next();
});

这样就基本可以实现了vue与express的cookie传递，从而记录下用户的登录信息，不需要用户进行重复的登录。