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