登陸認證 (鑑權)，是每個應用都需要的基礎功能。但很多的時候，卻都被大家所忽略，不僅安全漏洞嚴重，而且代碼緊耦合，混亂不堪。
Passport & JWT，正是爲了解決登陸認證的事情，讓認證模塊更透明，減少耦合！

網上關於 JSONWebToken (以下簡稱 JWT ) && passport.js的中文學習資料較少，學習的時候還蠻吃力的。所以總結出此篇，文章若有錯謬，歡迎指出，我會及時更正。

轉載請註明出處: https://blog.csdn.net/q95548854/article/details/103906889

一、JWT 是什麼？

JSON Web Token（JWT）是一個非常輕巧的規範。這個規範允許我們使用JWT在用戶和服務器之間傳遞安全可靠的信息。
一個JWT實際上就是一個字符串，它由三部分組成，頭部、載荷與簽名。
想了解更多關於 JWT 的，請查看我的另外一篇文章：全棧之初識JWT – Web安全的守護神

二、Passport 是什麼？

1、概述

passport.js是Nodejs中的一個做登錄驗證的中間件，極其靈活和模塊化，並且可與Express、Sails等Web框架無縫集成。Passport功能單一，即只能做登錄驗證，但非常強大，支持本地賬號驗證和第三方賬號登錄驗證（OAuth和OpenID等），支持大多數Web網站和服務。

想了解更多關於 Passport 的，請查看我的另外一篇文章：全棧之初識 Passport & Passport-jwt – Web安全的守護神

本文中只涉及最基本最常用的 本地賬號驗證

三、整理流程思路

1、當用戶登錄時，後端會校驗用戶名密碼後，創建 Token 並設置在 Cookie 內返回
2、前端之後的每次請求都會攜帶 Cookie （自動的，前端無需任何設置）
3、後端通過中間件校驗 Token 並獲取其中信息校驗，通過後再進行正常響應。-
4、另外本文中未使用 redis，並沒有將 Token 存儲持久化，所以準備在前端請求中間件中每次都判斷是否存在token，如不存在，請求後端重新生成token，實現默默登錄~

四、環境依賴

1、技術棧

前端使用 Vue + Nuxt
後端使用 Node + Express + Mongo

2、後端依賴

express express-session body-parser（express 基礎套件）
mongoose （操作 Mongo）
nodemon（node項目熱更新）
md5（密碼加密）
jsonwebtoken（生成token）
passport passport-jwt passport-local （passport 套件，驗證&解析token）
eslint lodash moment uuid（輔助套件）

五、後端項目搭建

生成express項目

npm install express-generator -g
express -e --git RMS-BE

安裝好以上說的各種依賴後，整理項目結構

RMS-BE
	|----node_modules
	|----src
		|----common # 公共js (配置文件/二次封裝)
			|----passport-local.js # passport local 策略
		|----config # 數據庫配置模塊
			|----index.js
		|----controllers # MVC中的C，用戶數據與視圖的銜接處理
			|----auth.js # 登錄、退出等權限控制
			|----people.js
		|----middleware # 中間件
			|----auth.js # token鑑權中間件
		|----models # 處理響應的數據，是數據模型
			|----user.js
			|----people.js
		|----routes # 路由模塊
			|----authRouter.js # 登錄等權限控制路由
			|----people.js
	|----server.js # 入口文件
	|----package.json

1、server.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const session = require('express-session');
const passport = require('passport');

const config = require('./src/config');

const port = process.env.PORT || 8899;
const app = express();

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(session({
  secret: config.secret,
  resave: true,
  saveUninitialized: true
}));
app.use(passport.initialize()); // 使 passport 持久化，不只是session
app.use(passport.session());
app.use((req, res, next) => {
  req.passport = passport // 爲了在中間件中可以調用到 passport
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  if (req.method == 'OPTIONS') {
    return res.send(200);
  } else {
    next();
  }
});

const mongoHost  = `mongodb://${config.host}:${config.port || 27017}/${config.database}`
mongoose.Promise = global.Promise
mongoose.connect(mongoHost, {
  useCreateIndex: true,
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useFindAndModify: false,
  config: {
    autoIndex: true,
  },
}).then(() => {
  console.log('connection established:', mongoHost)
}).catch(err => {
  console.error(err)
})

require('./src/common/passport-local')(passport);

// Route Section
require('./src/routes/authRouter')(app);
require('./src/routes/people')(app);

app.listen(port, () => console.log(`Server running on PORT: ${port}`));

2、routes/authRouter.js

const authMiddleware = require('../middleware/auth')
const authController = require('../controllers/auth')

module.exports = function (app) {
  app.post('/login', authController.login)
  app.post('/validateToken', authMiddleware, authController.validateToken)
  app.get('/getUser', authMiddleware, authController.getUser)
  app.post('/register', authMiddleware, authController.register)
  app.post('/changeUserInfo', authMiddleware, authController.changeUserInfo)
  app.post('/deleteUser', authMiddleware, authController.deleteUser)
  app.post('/logout', authMiddleware, authController.logout)
}

3、models/user.js

const mongoose = require('mongoose')
const moment = require('moment')
const uuid     = require('uuid')
const Schema = mongoose.Schema

const userSchema = new Schema({
  user_id : { type: Number, required: true },
  user_uuid : { type: String, required: true },
  user_name : { type: String, required: true },
  user_password : { type: String, required: true },
  user_created : { type: Number },
  user_updated : { type: Number },
  user_role : { type: Number, required: true } // 0: 賬戶鎖定(無權限) 1: 普通用戶 2: admin 3: superadmin
})

userSchema.pre('validate', function (next) {
  this.user_uuid = this.user_uuid  || uuid.v4()
  this.user_created = this.user_created || moment().format('X')
  this.user_updated = moment().format('X')
  next()
})

module.exports = mongoose.model('user', userSchema)

4、middleware/auth.js

module.exports = function (req, res, next) {
  // if (req.isAuthenticated()) return next()
  req.passport && req.passport.authenticate('jwt', { session: false }, (err, user, info) => {
    if (err) { return next(err) }
    if (!user)   return res.send({ success: true, code: 0, message: '權限禁止' })
    req.userInfo = user
    next()
  })(req, res, next)
}

5、controllers/auth.js

const User = require('../models/user')
const md5 = require('md5')
// const bcrypt = require('bcrypt')
const { get } = require('lodash')
const uuid = require('uuid')
const jwt = require('jsonwebtoken') //token 認證
const config = require('../config')
// const salt = bcrypt.genSaltSync(config.saltRounds)

const GenerateToken = user => {
  return jwt.sign({
    user_id: get(user, 'user_id'),
    user_uuid: get(user, 'user_uuid'),
    user_name: get(user, 'user_name'),
    user_role: get(user, 'user_role')
  }, config.JWT_SECRET, {
    jwtid: uuid.v4(),
    expiresIn: config.JWT_EXPIRY,
    issuer: config.JWT_ISSUER,
    audience: config.JWT_AUDIENCE,
    algorithm: config.JWT_ALG
  })
}

const ReturnUserInfo = user => {
  return {
    user_id: get(user, 'user_id'),
    user_uuid: get(user, 'user_uuid'),
    user_name: get(user, 'user_name'),
    user_created: get(user, 'user_created'),
    user_updated: get(user, 'user_updated'),
    user_role: get(user, 'user_role')
  }
}

const login = async function (req, res, next) {
  try {
    const username = get(req, 'body.user_name')
    const password = get(req, 'body.user_password')
    const userInfo = await User.findOne({ user_name: username })
    if (userInfo) {
      const verify = md5(password) === get(userInfo, 'user_password')
      if (verify) {
        // 生成token
        const token = GenerateToken(userInfo)
        res.cookie('authorization', token, {
          httpOnly: true,
          secure: process.env.NODE_ENV === 'production',
          expires: new Date(Date.now() + config.JWT_EXPIRY)
        })
        // 存儲token到redis
        return res.send({ success: true, code: 1, token: 'Bearer ' + token, user: ReturnUserInfo(userInfo) })
      } else {
        return res.send({ success: true, code: 0, message: '密碼錯誤！' })
      }
    } else {
      return res.send({ success: true, code: 0, message: '該用戶不存在！' })
    }
  } catch (error) {
    return res.send({ success: true, code: 0, message: '登錄失敗！error:' + error })
  }
}

const validateToken = async function (req, res, next) {
  const token = GenerateToken(req.userInfo)
  res.cookie('authorization', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    expires: new Date(Date.now() + config.JWT_EXPIRY)
  })
  return res.send({ success: true, code: 1, user: ReturnUserInfo(req.userInfo) })
}

const getUser =  async function (req, res, next) {
  if (get(req, 'userInfo.user_role') > 2) {
    try {
      const allUser = await User.find({})
      return res.send({ success: true, code: 1, user_list: allUser || [] })
    } catch (error) {
      return res.send({ success: true, code: 0, message: '獲取用戶列表失敗！error:' + error })
    }
  } else {
    return res.send({ success: true, code: 0, message: '權限不足，禁止訪問！' })
  }
}

const register = async function (req, res, next) {
  if (get(req, 'userInfo.user_role') === 3) {
    try {
      const username = get(req, 'body.user_name')
      const password = get(req, 'body.user_password') || '123456'
      const userRole = get(req, 'body.user_role')
      const checkUsername = await User.findOne({ user_name: username })
      if (checkUsername) {
        return res.send({ success: true, code: 0, message: '該用戶已存在！' })
      } else {
        let userid = 0
        const rows = await User.find({}).sort({'user_id':-1}).limit(1)
        if (rows && rows.length) {
          userid = rows[0].user_id + 1
        } else {
          userid = 0
        }
        const newUserInfo = new User({
          user_id: userid,
          user_name: username,
          user_password: md5(password),
          user_role: userRole
        })
        newUserInfo.save().then(result => {
          return res.send({ success: true, code: 1, user: ReturnUserInfo(result) })
        }).catch(error => {
          console.log("Error:" + error)
          return res.send({ success: true, code: 0, message: '註冊失敗！error:' + error })
        })
      }
    } catch (error) {
      return res.send({ success: true, code: 0, message: '註冊失敗！error:' + error })
    }
  } else {
    return res.send({ success: true, code: 0, message: '權限不足，禁止註冊！' })
  }
}

const changeUserInfo = async function (req, res, next) {
  const useruuid = get(req, 'body.user_uuid')
  const tokenUserRole = get(req, 'userInfo.user_role')
  if (tokenUserRole === 3 || useruuid === get(req, 'userInfo.user_uuid')) {
    try {
      const isResetPsw = get(req, 'body.is_reset_password')
      const isChangePsw = get(req, 'body.is_change_password')
      const isChangeUsername = get(req, 'body.is_change_username')
      const username = get(req, 'body.user_name')
      const userRole = tokenUserRole === 3 ? get(req, 'body.user_role') : tokenUserRole
      const userInfo = await User.findOne({ user_uuid: useruuid })
      if (userInfo) {
        const params = {
          user_name: username,
          user_role: userRole
        }
        if (isChangeUsername) { // 重置用戶名
          const checkNewUsername = await User.findOne({ user_name: username })
          if (checkNewUsername) return res.send({ success: true, code: 0, message: '用戶名已存在' })
          params.user_name = username
        }

        if (isResetPsw) { // 重置密碼
          params.user_password = md5('123456')
        }

        if (isChangePsw) { // 通過原密碼修改密碼
          const password = get(req, 'body.user_password')
          const verify = md5(password) === get(userInfo, 'user_password')
          if (!verify) return res.send({ success: true, code: 0, message: '原密碼錯誤！' })
          const newPassword = get(req, 'body.new_user_password')
          params.user_password = md5(newPassword)
        }
        
        await User.update({ user_uuid: useruuid }, params)
        const newUserInfo = await User.findOne({ user_uuid: useruuid })
        return res.send({ success: true, code: 1, user: ReturnUserInfo(newUserInfo) })
      } else {
        return res.send({ success: true, code: 0, message: '該用戶不存在！' })
      }
    } catch (error) {
      return res.send({ success: true, code: 0, message: '修改失敗！error:' + error })
    }
  } else {
    return res.send({ success: true, code: 0, message: '權限不足，禁止修改！' })
  }
}

const deleteUser = async function (req, res, next) {
  if (get(req, 'userInfo.user_role') === 3) {
    try {
      const useruuid = get(req, 'body.user_uuid')
      const checkUser = await User.findOne({ user_uuid: useruuid })
      if (checkUser) {
        const newUserInfo = await User.remove({
          user_uuid: useruuid
        })
        return res.send({ success: true, code: 1, user: ReturnUserInfo(newUserInfo) })
      } else {
        return res.send({ success: true, code: 0, message: '該用戶不存在！' })
      }
    } catch (error) {
      return res.send({ success: true, code: 0, message: '刪除失敗！error:' + error })
    }
  } else {
    return res.send({ success: true, code: 0, message: '權限不足，禁止刪除！' })
  }
}

const logout = async function (req, res, next) {
  // 清除redis中的token
  res.clearCookie('authorization')
  return res.send({ success: true, code: 1, message: '退出成功！' })
}

module.exports = {
  login,
  validateToken,
  getUser,
  register,
  changeUserInfo,
  deleteUser,
  logout
}

6、config/index.js

module.exports = {
  secret : 'renyide',
  host : process.env.DB_HOST || 'localhost',
  port : process.env.DB_PORT || '27017',
  database: 'rms',
  JWT_SECRET: 'renyide',
  JWT_EXPIRY: 86400000,
  JWT_ISSUER: 'RMS',
  JWT_AUDIENCE: 'RMS_XH',
  JWT_ALG: 'HS256'
}

7、common/passport-local.js

const JwtStrategy = require('passport-jwt').Strategy
const ExtractJwt = require('passport-jwt').ExtractJwt
const User = require('../models/user')

const config = require('../config')

const opts = {
  // Prepare the extractor from the header.
  jwtFromRequest: ExtractJwt.fromExtractors([
    req => req.cookies['authorization'],
    ExtractJwt.fromUrlQueryParameter('access_token'),
    ExtractJwt.fromAuthHeaderWithScheme('Bearer'),
  ]),
  // Use the secret passed in which is loaded from the environment. This can be
  // a certificate (loaded) or a HMAC key.
  secretOrKey: config.JWT_SECRET,
  // Verify the issuer.
  issuer: config.JWT_ISSUER,
  // Verify the audience.
  audience: config.JWT_AUDIENCE,
  // Enable only the HS256 algorithm.
  algorithms: [config.JWT_ALG],
  // Pass the request object back to the callback so we can attach the JWT to it.
  passReqToCallback: true
}

module.exports = passport => {
  passport.use(new JwtStrategy(opts, async function (req, jwt_payload, done) {
    try {
      const userInfo = await User.findOne({
        user_uuid: jwt_payload.user_uuid
      })
      if (userInfo && userInfo.user_role > 0) {
        done(null, userInfo)
      } else {
        done(null, false)
      }
    } catch (e) {
      return done(e)
    }
  }))
}

六、前端部分代碼

1、中間件


export default async function ({ app, store, error, redirect, req }) {
  if (req && (req.url === '/__webpack_hmr' || req.url === '/__webpack_hmr/client' || req.url === '/api/v1/validateToken')) return
  await store.dispatch('auth/validateToken')
  if (!store.state.auth.user.user_id) {
    return redirect('/login')
  } else if (store.state.auth.user.user_role === 0) {
    alert('您的賬戶被凍結，請聯繫管理員！')
    return redirect('/login')
  }
}

2、以vuex中是否存在userid判斷是否有token，登錄校驗請求

import Vue from 'vue'
import Vuex from 'vuex'
import { deleteCookie } from '~/utils/cache'

Vue.use(Vuex)

export const state = () => ({
  user: {}
})

export const mutations = {
  setUser (state, data) {
    state.user = data
  }
}

export const actions = {
  async login ({ commit, dispatch }, params) {
    try {
      const { data } = await this.$axios.post(`/api/v1/login`, params)
      if (data.code !== 0) {
        this.$message.success('登陸成功！')
        commit('setUser', data.user)
      } else {
        console.log(data.message)
        this.$message.error('登錄失敗！' + data.message)
      }
    } catch (e) {
      console.log(e)
      await dispatch('logout')
      throw e
    }
  },
  async logout ({ commit }) {
    try {
      const { data } = await this.$axios.post(`/api/v1/logout`)
      if (data.code !== 0) {
        this.$message.success('退出成功！')
      } else {
        console.log(data.message)
        this.$message.error('退出失敗！' + data.message)
      }
    } catch (e) {
      console.log(e)
    } finally {
      commit('setUser', {})
      deleteCookie('authorization')
      window.location.href = '/login'
    }
  },
  async validateToken ({ commit, dispatch }) {
    try {
      const { data } = await this.$axios.post(`/api/v1/validateToken`)
      if (data.code === 0) {
        console.log(data.message)
        this.$message.error(data.message)
      } else {
        commit('setUser', data.user)
      }
    } catch (e) {
      console.log(e)
    }
  }
}

覺得有幫助的小夥伴右上角點個贊~

掃描上方二維碼關注我的訂閱號~

張興華

發佈了116 篇原創文章 · 獲贊 68 · 訪問量 18萬+

私信關注

全棧之鑑權之旅 -- JWT + passport 實現 Token 驗證（Node + Express）

一、JWT 是什麼？

二、Passport 是什麼？

1、概述

三、整理流程思路

四、環境依賴

1、技術棧

2、後端依賴

五、後端項目搭建

六、前端部分代碼

覺得有幫助的小夥伴右上角點個贊~

掃描上方二維碼關注我的訂閱號~

GitHub + PicGo搭建個人圖牀

全棧運維之 Docker 部署前後端

全棧之初識 Passport & Passport-jwt – Web安全的守護神

全棧之初識JWT -- Web安全的守護神

JS數據處理實戰（四）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結