您的位置:首页 > Web前端 > React

react redux 登陆拦截

2017-08-29 00:00 351 查看
摘要: 初学者,学习登陆验证


一登陆界面 view=>>>>>>>component

import React ,{Component} from 'react';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router-dom';
import {Navbar,Nav,NavItem ,NavDropdown ,MenuItem} from "react-bootstrap";
require(`./style.less`)
import { connect } from 'react-redux';
import * as loginvolidate from 'actions/loginvolidate';

@connect (
state => state,
dispatch => bindActionCreators(loginvolidate, dispatch)
)

class  Header  extends React.Component {
constructor(props) {
super(props);

//验证每次组件发生变化时都会验证
this.props.loginVolidate_success()
}

render() {
const {data} = this.props.loginvolidate;
console.log(data)
return (
<div>

//登陆用户名设置页面转换
{data==undefined?

<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
狠林首页
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} ><Link to='login'>登陆</Link></NavItem>
<NavItem eventKey={2} ><Link to='register'>注册</Link></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
:
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
狠林首页
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav bsStyle="pills" pullRight >
<NavDropdown eventKey="4" title={data} id="nav-dropdown">
<MenuItem eventKey="4.1">个人中心</MenuItem>
<MenuItem eventKey="4.2">会员</MenuItem>
<MenuItem eventKey="4.3">发帖管理</MenuItem>
</NavDropdown>
<NavItem eventKey="2" title="Item">消息</NavItem>
<NavItem eventKey="1" title="Item">注销</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
}
</div>
)
}
}

export  default  Header;

二 actions

import fetch from 'isomorphic-fetch';
import queryString from 'queryString'
export const success = (data) => ({
type: 'loginVolidate_success',
data:data.data

})

// 页面初次渲染时获取数据
export const loginVolidate_success = () => {

return dispatch => {

//这里需要在server.js中设置拦截 否则写全http:localhost:8080/dog/login/loginVolidate.do

fetch('/dog/login/loginVolidate.do', {
credentials: 'include',   //必须加上用来与后台session进行交互,否则,会发现后台session为null
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
body: queryString.stringify()
})
.then((response) => {

if(response.ok){
return  response.json();
}
})
.then(data=>{
dispatch(success(data))
})
.catch(()=>alert('用户名或密码错误'))
}
}

三redux

const initState = {
}

export const loginvolidate = (state = initState, action) => {
switch (action.type) {
case "loginVolidate_success":
return {
...state,
data: action.data
}
default:
return state
}
}

store与相关配置

后台:springmvc

package com.Tieba.controller;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.SessionAttributes;

import dog.User;

@Controller
@RequestMapping("/login")
public class loginController {

@RequestMapping(value="/loginUser", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> loginUser(HttpServletRequest req,HttpServletResponse res,
HttpSession session){

System.out.println(req.getParameter("user"));
System.out.println(req.getParameter("psw"));
session.setAttribute("user", req.getParameter("user"));

Map<String,Object> map = new HashMap<String, Object>();
map.put("data", "success");

return map;
}

@RequestMapping(value="/loginVolidate", method=RequestMethod.POST)
@ResponseBody

public Map<String, Object> loginVolidate(HttpServletRequest req,HttpSession session){

Map<String,Object> map = new HashMap<String, Object>();

map.put("data", session.getAttribute("user"));
System.out.println(session.getAttribute("user"));

return map;

}
}


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息