react redux 登陆拦截
2017-08-29 00:00
351 查看
摘要: 初学者,学习登陆验证
一登陆界面 view=>>>>>>>component
二 actions
三redux
store与相关配置
后台:springmvc
一登陆界面 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; } }
相关文章推荐
- java的权限拦截和javascipt判断是否登陆时的跳转
- 纳税服务系统【登陆、权限拦截、页面嵌套】
- S2SH项目登陆拦截的回顾(补)
- shiro 权限认证框集成到spring中,实现登陆与权限拦截
- 还用户一片净土:广告自动拦截功能明年登陆Chrome
- 登陆拦截 filter() , 字符编码拦截器
- restful风格做登陆拦截遇到重定向返回不了数据
- springmvc登陆拦截案例
- vue全家桶+element-UI搭建后台管理系统(4)“:登录拦截,登陆后才可以操作”
- SpringMVC拦截器实现登陆时的验证拦截
- 拦截tablayout 点击事件,不触发viewpaper滚动 例如登陆检测等场景
- 力所能及之拦截过滤登陆
- Android中关于登陆拦截逻辑流程(Intent传递使用步骤)
- spring 自定义注解实现登陆拦截
- struts2_全局的拦截器,拦截用户非法登陆
- 登陆拦截防止登陆页面加载到iframe里面
- django未登陆用户的请求进行拦截(非中间件的形式)
- Android进阶之路 - 最好的用的登陆拦截!
- 用户后台登陆拦截
- struts2 权限拦截器 拦截没有登陆的请求