基于 JWT 的权限验证

这里有一篇文章描述的已经非常详尽，阐述了 JWT 验证相比较传统的持久化 session 验证的优势，以及基于 angular 和 express 验证的简单流程。

基于Json WebToken的权限验证

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.0
nvm install 8.0.0
nvm 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: 'whistleyz@163.com',
        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 直接导出了 fetch
fetch 的用法很简单，参考 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 (
        <Layout>
            <Header>
                <HeaderComponent routes={routes}>
                    {isLogin ? <HeaderRight user={user} /> : <LoginComponent doLogin={doLogin} app={app} /> }
                </HeaderComponent>
            </Header>
           ...
    )
}
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",

• 【单页面博客从前端到后端】环境搭建

• 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

• 【单页面博客从前端到后端】基于 Passport 和 Koa@2 的权限验证与 DVA 的 Model 设计