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)
        }
    });
})