node实现token验证及vue前端获取用户信息权限控制

基本思路

  1. 用户登录校验成功后服务端会根据 用户信息和时间 生成token,并将其和用户的信息一起发送给客户端。
  2. 客户端将token存到localStorage,将用户的信息挂载到vue实例下,每次发送请求或进行操作可以通过用户信息判断其是否有权限。
  3. 客户端每次发送请求都将token携带在请求头中传给服务端。
  4. 服务端每次接收请求验证token的有效性和时间是否过期,如无法验证通过,返回错误的信息给客户端。
  5. 客户端接收token无效的信息重新跳到登录页面,用户重新登录。

功能实现

yarn add jsonwebtoken 

前端部分

  • 登录获取token
this.$axios.post("/api/login/user", {
  userName: this.userName,
  password: this.password
}).then(res => {
  if (res.code == 0) {
    this.$router.push({
      name: "homepage"
    });
    //vm为window下的vue实例对象,用户可以在组件中通过vm.$user或this.$root.$user获取用户的信息控制其权限。
    vm.$user = res.data.user;
    localStorage.setItem('token',res.data.token)
  } else {
    this.$messageTips(res.msg, "warning", 2000);
    this.load = false;
    this.state = "登录";
  }
});
  • axios请求登录拦截
// 处理请求拦截
instance.interceptors.request.use(
  config => {
    config.headers.Token = localStorage.getItem('token')||''
    return config
  }
)

// 处理响应拦截
instance.interceptors.response.use(
  response => {
    if(response.data.msg=='token无效') {
      vm.$messageTips(response.data.msg, "warning", 2000)
      vm.$router.push({
        name: "login"
      });
    }
    return response.data
  },
)

后端部分

  • 登录部分
var express = require('express');
var router = express.Router();
var MongoClient = require('mongodb').MongoClient;
var url = 'mongodb://127.0.0.1:27017/';
var jwt = require('jsonwebtoken')
var {secret} = require('../config')
router.post('/user', function (req, res) {
  var userName = req.body.userName;
  var password = req.body.password;
  MongoClient.connect(url, {
    useNewUrlParser: true
  }, function (err, client) {
    if (err) {
      console.log('连接失败', err);
      res.json({
        code: 1,
        msg: '网络异常, 请稍候重试'
      })
      return;
    }
    var db = client.db('myBlog');
    console.log(userName);
    console.log(password);
    db.collection('user').find({
      userName: userName,
      password: password
    }).toArray(function (err, data) {
      if (err) {
        console.log('查询失败', err);
        res.json({
          code: 1,
          msg: '网络异常, 请稍候重试'
        })
      } else if (data.length <= 0) {
        res.json({
          code: 1,
          msg: '用户名或密码错误'
        })
      } else {
        //secret是我们单独保存在config里面的一个密钥,用来生成token和解密token,expiresIn是过期时间,单位秒。
        var token = jwt.sign({
          data: String(data[0]._id),
        }, secret, {
          expiresIn: 24*3600
        })
        res.json({
          code: 0,
          msg: '登录成功',
          data: {
            user: data[0],
            token
          }
        })
      }
      client.close();
    })
  })
});
module.exports = router;
  • 拦截部分

使用中间件拦截接口,除登录外的接口都验证token的有效性。

var express = require('express');
var app = express();
var jwt = require('jsonwebtoken')
var {secret} = require('./config')
// 引入路由模块
var LoginRouter = require('./routes/login.js')
// 使用路由模块,中间件
app.all("*", function (req, res, next) {
	var token = req.headers.token
	jwt.verify(token, secret, function (error, data) {
		if (error && req.path != '/api/login/user') {
			console.log(error.message); // 验证不通过
			return res.json({
				code: 1,
				msg: 'token无效'
			})
		}
		console.log(data);
		next()
	})
})
app.use('/api/login/', LoginRouter);
let server = app.listen(3000);

发布了22 篇原创文章 · 获赞 12 · 访问量 3563
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览