react redux 登陆拦截

2019独角兽企业重金招聘Python工程师标准>>>

一登陆界面   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;
            
        }
}

 

 

 

转载于:https://my.oschina.net/u/3647713/blog/1525402