koa使用koa-passport实现路由进入前登录验证

澳门新葡亰赌995577 4

现在的项目需求很简单,当进入一个页面的时候,如果没登录,则跳转到登录页面,如果登录了则直接到对应页面。

react项目中实现登录注册简单粗暴感悟

koa2写的项目,使用koa-passport,koa-session,根据koa-passport的

全局安装react官方推荐脚手架 create-react-app

isAuthenticated()来判断是否登录。

这篇文章写的很好:===》https://segmentfault.com/a/1190000011557953

我的其中一个路由代码;
controllers:

exports.renderUserList = async (ctx, next) => {
    if (ctx.isAuthenticated()) {
        console.log(ctx.state.user)
        console.log(ctx)
        let data = await userDao.userList()
        await ctx.render('userList', {
            title: '员工列表',
            csrf: ctx.csrf,
            data: data
        })
    }else {
        ctx.redirect('/login')
    }
}
npm install create-react-app -g

router.js:

创建react项目

router.get('/userList', User.renderUserList)
create-react-app react-login-register

passport.js:

进入项目并运行

const passport = require('koa-passport')
const User = require('../models/user')
const log4js = require('koa-log4')
const logger = log4js.getLogger('passport')
const LocalStrategy = require('passport-local').Strategy
const md5 = require('md5')

passport.use(new LocalStrategy(
    /**
     * @param username 用户输入的用户名
     * @param password 用户输入的密码
     * @param done 验证验证完成后的回调函数,由passport调用
     */
    function (username, password, done) {
        User.findOne({username: username},function (err,result) {
            if (result !== null) {
                if (result.password === md5(password)) {
                    return done(null, doPassword(result),'登录成功')
                } else {
                    return done(null, false, '密码错误')
                }
            } else {
                return done(null, false, '用户不存在')
            }
        }).catch(function (err) {
            logger.error(err.message)
            return done(null, false, {message: err.message})
        })
    }
))

// serializeUser 在用户登录验证成功以后将会把用户的数据存储到 session 中
passport.serializeUser(function (user, done) {
    done(null, user)
})

// deserializeUser 在每次请求的时候将从 mongodb 中读取用户对象
passport.deserializeUser(function (id, done) {
    console.log(id)
    User.findById(id, function (err, user) {
        done(err, doPassword(user))
    })
    // done(null, user)
})

//隐藏密码,相当于是去掉密码的用户信息保存在session里
function doPassword(user) {
    if(user) {
        user.password = ''
        return user
    } else {
        return null
    }
}

module.exports = passport
npm start

澳门新葡亰赌995577, 

澳门新葡亰赌995577 1

 

image.png

问题:目前用

安装此demo中各种依赖

isAuthenticated()来判断是否登录只会在单个路由中分别判断,想问下大家有没有办法可以把这个判断是否登录的方法集成成一个方法,然后每个路由去使用。欢迎大家留言!
  npm install antd-mobile -S  // UI框架
  npm install redux -S  // redux
  npm install react-redux -S  // react-redux
  npm install react-router-dom -S  // react路由
  npm install axios -S // react请求交互
  npm install redux-thunk -S // redux中间件 配合redux解决异步问题
  npm install babel-plugin-transform-decorators-legacy -D // 配合react-redux 支持@装饰器
  npm install mongoose -D // 安装mondoose MongoDB数据库插件
  npm install express -S // 基于node开发,搭建请求环境
  npm install babel-plugin-import -S antd-mobile按需加载babel插件
  npm install body-parser -S  后台数据接口用户传进来的参数解析插件
  npm install cookie-parser -S 通过cookie存储用户登录状态
  PS: 合并安装飞起来~

  npm run eject // 释放react关于webpack的封装配置
  sudo brew install mongodb(我这里是mac安装方式,其他平台可百度下)

删掉 src目录下面所有文件并新建index.js

 // index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Demo</div>,
    document.getElementById('root')
)

澳门新葡亰赌995577 2

image.png

在src目录新建一下文件和文件夹

澳门新葡亰赌995577 3

image.png

components 放置组件
containers 放置页面
redux 放置redux元素集合文件(定义各种常量,reducers, create actions)
reducer.js 集合redux里面各种文件

澳门新葡亰赌995577 4

image.png

containers 新建登录注册两个页面基本内容

import React, {Component} from 'react'

class Login extends Component {
    render() {
        return (
            <div>登录页面</div>
        )
    }
}

export default Login

redux 新建user.redux.js

export function user(state=0,action) {
    switch (action.type) {
        default:
            return state;
    }
}

reducer.js 引入user.redux.js 并合并

import {combineReducers} from 'redux'

import {user} from './redux/user.redux'

export default combineReducers({user})

components 新建 checkLogin 判断用户是否登录