基于 JWT 的权限验证
这里有一篇文章描述的已经非常详尽，阐述了 JWT 验证相比较传统的持久化 session 验证的优势，以及基于 angular 和 express 验证的简单流程。
Passport 专注于用户验证 Nodejs 库
Passport 提供了多种的验证策略，如：
passport-http-bearer - 使用
Bearer tokens对HTTP请求做权限验证。这个最适合我们的项目不过了。passport-local - 本地验证，普通的登陆验证，数据库密码验证成功即可。
此外还有 passport-github , passport-weixin , passport-qq , passport-weibo … ，这些你都可以在 官网 上找到。
我们就采用这种方式来进行权限验证。
Koa@2 基本环境
首先需要注意的是使用 Koa@2，Node的版本需要 7.X的版本以上，而且启动时需要加上
--harmony或者—harmony-async-await
最近Node 8.0已经上线，我直接采用的是Node v8.0.0nvm install 8.0.0nvm alias default 8.0.0
blog/server基本的目录结构
server
├─ bin / www # 入口文件
├─ config # server配置文件
├─ controller # 控制器文件夹
| └─ user.js
├─ lib
| ├─ auth.js # 认证逻辑
| └─ db.js # 数据库 连接等
├─ models # Mongoose Models
├─ routes # Koa router
├─ utils # 工具方法
├─ index.js
└─ package.json 我们在入口文件处 server/bin/www 来连接 MongoDB
(async () => {
// 测试连接 MongoDB
try {
const info = await connect(dbConfig)
console.log(`Success to connect to MongoDB at ${info.host}:${info.port}/${info.name}`)
} catch (err) {
console.error(err)
process.exit()
}
// 开启服务进程
try {
app.listen(port)
console.log(`Server is running at http://localhost:${port}`)
} catch (err) {
console.error(err)
}
})()server/lib/db.js 下对应的 connect 方法
exports.connect = function (config) {
return new Promise((resolve, reject) => {
mongoose.connection
.on('error', err => reject(err))
.on('close', () => console.log('MongoDB connection closed! '))
.on('open', () => resolve(mongoose.connections[0]))
mongoose.connect(`mongodb://${config.host}:${config.port}/${config.database}`, config.options)
})
}在 server/config/index.js 增加 MongoDB 的配置
const base = {
admin: {
username: 'whistleyz',
password: 'admin123',
email: '[email protected]',
level: 51 // >50 超管
}
}
const dev = Object.assign(base, {
db: {
host: '127.0.0.1',
port: 27017,
database: 'fullblog',
options: {
user: '',
pass: ''
}
}
})
const prod = Object.assign(base, {})
const env = process.env.NODE_ENV || 'development'
const _config = {
development: dev,
production: prod
}
// 数据库配置
module.exports = _config[env]由于线上和我们开发甚至是测试环境，配置都会有些许不同，我们可以用
process.env.NODE_ENV来区分这些配置
实现后端验证逻辑
新建 server/lib/auth.js
// serialize deserialize user objects into the session
passport.serializeUser((user, done) => done(null, user.username))
passport.deserializeUser(async (username, done) => {
const user = await UserModel.findOne({username})
done(null, user)
})
/**
* 基于 Bearer、Local 的认证方式
* 下面导出的路由中间件走的就是这里的逻辑
* passport-http-bearer 会自动解析出 headers 中的 token
* https://github.com/jaredhanson/passport-http-bearer/blob/master/lib/strategy.js#L89
*/
passport.use(new BearerStrategy(async (token, done) => {
try {
console.log(token)
const accessToken = await AccessToken.findOne({token}).populate('user')
accessToken ? done(null, accessToken.user) : done(null, false, {type: 'error', message: '授权失败！'})
} catch (err) {
done(err)
}
}))
/**
* 默认从 req.body 或者 req.query 中取出 username, password 字段
* https://github.com/jaredhanson/passport-local/blob/master/lib/strategy.js#L49
*/
passport.use(new LocalStrategy(async (username, password, done) => {
try {
const user = await UserModel.findOne({username})
if (user && user.validPassword(password)) {
done(null, user)
} else {
done(null, false)
}
} catch (err) {
done(err)
}
}))
// 导出中间件
exports.isBearerAuthenticated = function () {
return passport.authenticate('bearer', {session: false})
}
exports.isLocalAuthenticated = function () {
return passport.authenticate('local', {session: false})
}
exports.passport = passport新建 server/routes/api.js ：
const Router = require('koa-router')
const User = require('../controllers/user')
const { isBearerAuthenticated, isLocalAuthenticated } = require('../lib/auth')
const router = new Router()
router.use(async (ctx, next) => {
try {
await next()
} catch (error) {
console.error(error)
ctx.status = 400
ctx.body = {
code: error.code,
message: error.message || error.errmsg || error.msg || 'unknown_error',
error
}
}
})
// 初始化用户数据
User.seed()
// Auth 认证
router.post('/auth', isLocalAuthenticated(), User.signToken)
router.get('/auth', isBearerAuthenticated(), User.getUserByToken)
module.exports = router.routes()那么我们在 server/controller/user.js 下的处理逻辑久变得简单：
// LocalStrategy 的中间件验证通过，会把 user 储存在 req 中
exports.signToken = async function (ctx, next) {
const { user } = ctx.req
// 重新请求 token 需要删除上一次生成的 token
await TokenModel.findOneAndRemove({user: user._id})
const result = await TokenModel.create({
// md5加密
token: genHash(user.username + Date.now()),
user: user._id
})
ctx.status = 200
ctx.body = {
success: true,
data: result
}
}
// LocalStrategy 的中间件验证Token有效，会把 user 储存在 req 中
exports.getUserByToken = async function (ctx, next) {
ctx.status = 200
ctx.body = {
success: true,
data: ctx.req.user
}
}
// 当数据库中user表示空的时候，创建超级管理员
exports.seed = async function (ctx, next) {
const users = await UserModel.find({})
const adminInfo = config.admin
if (users.length === 0) {
const _admin = new UserModel(adminInfo)
const adminUser = await _admin.save()
}
}我们可以借助
mongoose还控制Token的寿命
比如设置 7 天后过期，expires: 60 * 60 * 24 * 7
到这里我们的后端逻辑基本实现，为了和前端 webpack-dev-server 本地服务器进行数据模拟，我们可以开启 devServer 的 proyx ，以及开启 koa 的跨域支持
task/config ：
config.devServer = {
hot: true,
contentBase: path.resolve(__dirname, '../dist'),
publicPath: '/',
proxy: {
"/api/v1": "http://localhost:8082"
}
}这样，前端的任何 /api/v1 下的请求，都会被代理到 http://localhost:8082 而 8082 就是 koa 服务器的监听端口。
// koa 跨域
const logger = require('koa-logger')
const app = new koa()
app.use(kcors())前端的登陆逻辑实现
实现一个 dva model
在下一篇文章中，我们会深入 dva 的框架核心实现。我们先来看看 dav 的基本使用
新建 src/model/app.js
import { doLogin, getUserByToken } from '../service/app'
import { LocalStorage } from '../utils'
import { message } from 'antd'
export default {
namespace: 'app',
state: {
isLogin: false,
user: null
},
subscriptions: {},
effects: {
*checkToken({next}, {call, put}){
const Token = LocalStorage.getItem('token')
if (Token) {
yield put({type: 'loginSuccess'})
} else {
message.error('你还没有登陆哦！')
}
},
*doLogin({payload}, {call, put}){
try {
const { success, data } = yield call(doLogin, payload)
if (success) {
LocalStorage.setItem('token', data.token)
yield put({type: 'requireAuth'})
}
} catch (err) {
message.error('授权失败！')
yield put({type: 'authErr'})
}
},
*getUserByToken({}, {call, put}){
try {
const { success, data } = yield call(getUserByToken)
if (success) {
yield put({type: 'authSuccess', payload: data})
}
} catch (err) {
message.error(err.message)
yield put({type: 'authErr'})
}
}
},
reducers: {
loginSuccess(state){
return {
...state, isLogin: true
}
},
authErr(state){
return {
...state, isLogin: false, user: null
}
},
authSuccess(state, {payload}){
return {
...state, user: payload
}
}
}
}对于
redux-saga的effect等的用法，可以参考 文档
这里我们对 localStorage 做了一次封装，看了源码相信你就知道目的是什么了：
/**
* src/utils/localStorage.js
* Custom window.localStorage
*/
const STORE_PREFIX = 'blog'
export function getItem (key) {
return window.localStorage.getItem(STORE_PREFIX + '-' + key)
}
export function setItem (key, value) {
window.localStorage.setItem(STORE_PREFIX + '-' + key, value)
}
export function removeItem (key) {
window.localStorage.removeItem(STORE_PREFIX + '-' + key)
}封装 src/utils/request.js
import fetch from 'dva/fetch'
import * as LocalStorage from './localStorage'
const URL_PREFIX = '/api/v1'
const TOKEN_NAME = 'token'
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default function request(url, options) {
options = Object.assign({
headers: new Headers({
'Content-Type': 'application/json'
})
}, options)
return fetch(URL_PREFIX + url, options)
.then(checkStatus)
.then(res => res.json())
.then(data => data)
}
/**
* Request width token
* @param {[type]} url
* @param {[type]} options
* @return {[type]}
*/
export function requestWidthToken (url, options) {
const TOKEN = LocalStorage.getItem(TOKEN_NAME)
options = Object.assign({
headers: new Headers({
'Content-Type': 'application/json',
'Authorization': `Bearer ${TOKEN}`
})
}, options)
return request(url, options)
}
dva/fetch直接导出了fetchfetch的用法很简单，参考 github地址
这里我们把 url 的 prefix、token name 提取出来用作常量保存，以便于我们修改，最好的方法是提取出来用一个文件保存
组件与model的通信
还记得我们的展示组件吗，现在我们让它 connect 到我们的 model
import { connect } from 'dva'
const { Header, Content, Footer } = Layout
const { HeaderRight } = HeaderComponent
const App = ({children, routes, app, doLogin}) => {
const { isLogin, user } = app
return (
{isLogin ?
...
)
}
function mapStateToProps ({app}, ownProps) {
return {
app
}
}
function mapDispatchToProps (dispatch) {
return {
doLogin({username, password}){
dispatch({type: 'app/doLogin', payload: {username, password}})
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App) 唯一需要注意的就是action 的 type 属性了，如 app/doLogin 前缀 app 就是 dva.model 的 namespace
从 dva/createDva.js at master · dvajs/dva · GitHub 中可以看到，
dva会把model.namespace最为reducer,effects的prefix拼接
然后我们就可以在 LoginComponent 中，监听登陆的相应事件来调用对应的方法了。
小结
在写后端的时，难免遇到很多错误，我们可以使用 supervisor 、pm2 来监听文件变动来自动重启 nodejs 。鉴于后期我们会使用 pm2 部署项目。这里我还是使用 pm2
在 server/package.json 中的 scripts 下新增："start": "pm2 start bin/www --watch --name blog && pm2 log blog",