vue+express利用token 完成前后端登录

token是后端给前端的一个二维码, 这个二维码一般是暗码,  前端拿着这个二维码到后端, 后端便可以通过这个二维码得知用户是否登录过, 用户是谁等信息(具体什么信息,是后端在返回token时候设置的);

nodejs里的插件: jsonwebtoken;使用方法:

var jwt = require('jsonwebtoken');

var token = jwt.sign({ foo: 'bar' }, 秘钥);

这个秘钥一般都是秘钥文件的读取结果,也就是放到秘钥文件里储存.

接着就是通过res将这个token返回给前端

app.post('/api/login',  (req, res) =>{
    const { userName,password} = req.body;
    login(userName, password,function(data){
        if(data[0]){
            bcrypt.compare(password,  data[0].password).then(function(result) {
               if(result){
                fs.readFile('./TOKEN/TOKEN_EV',(err,data)=>{
                   const serateKey = data.toString();
                   res.status(200).json({
                    userName,
                       token: jwt.sign({ id: data[0].id}, serateKey)
                   })
                })

               }else{
                res.status(422).json({message:'密码不匹配'})
               }
            });

        }else{
            res.status(422).json({message:'用户名不存在'})
        }

    })

　　

 

前端拿到token后,可以作为cookie存起来, 这是最方便的. 但是一个不好处就是后端不能跨域获取.

比如百度贴吧(假如地址是www.tieba.baidu.com)的cookie, 百度地图(假设地址是www.ditu.baidu.com)获取不到.

所以,就想了一个办法, 把请求接口的请求头设置一下, 每次请求都会带着这个token了. 页面就利用vue的router进行判断

axios.interceptors.request.use(
  config => {
    if (localStorage.JWT_TOKEN) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authorization = `token ${localStorage.JWT_TOKEN}`;//这个字符串里的token可以不写
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });

router.beforeEach(({name}, from, next) => {
  // 获取 JWT Token
  if (localStorage.getItem('JWT_TOKEN')) {
    // 如果用户在login页面
    if (name === 'login') {
      next('/');
    } else {
      next();
    }
  } else {
    if (name === 'login') {
      next();
    } else {
      next({name: 'login'});
    }
  }

　　

后端接到前端的请求后, 验证是否带有token

app.get('/api/profile', (req, res) => {
    //查看请求头信息
    const token = req.headers.authorization.split(' ').pop(); //获取请求头的信息

    fs.readFile('./TOKEN/TOKEN_EV', (err, result) => {//读取token的秘钥, 可以把这个秘钥文件存起来, 然后读取后引入,不必每次都读取

        if (!err) {
            jwt.verify(token, result, (err, decoded) => {
                const id = decoded.id;
                //这里根据id处理
                Profile(id, (data) => {//这是业务层的东西, 读取数据库, 然后返回数据, 不用管

                    res.json(data[0])

                })
            });
        } else {
            res.send(err)
        }
    });
})