基于 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: '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直接导出了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 (
<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",
