#This project is based on react and immutable-js.
Demo http://router-view.mvc-works.org/
##Initial idea
In time travelling debugger, router is not controlled. So I suggest location bar being regarded as a view of store in order to be controlled.
// src/router/RouterView.js
import React, { Component } from 'react'
import {Switch,Route,Redirect} from 'react-router-dom'
export default class RouterView extends Component {
render() {
let {routes}=this.props
let isRedic=routes.filter((item)=>item.redirect)
let Redic=isRedic.map((item,index)=>{
return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
})
routes=routes.filter((item)=>!item.redirect)
return (
<Switch>
{
routes.map((item,index)=>{
return <Route key={index} path={item.path} render={(props)=>{
return <item.component routes={item.children} {...props}></item.component>
}}></Route>
})
}
{
Redic.length!==0 && Redic
}
</Switch>
)
}
}
##Notice keep in mind that router-view is totally based on immutable-js. if you need to route asynchronously, try set skipRendering to true during loading undefined value is eliminated on purpose, fire an issue if you think differenly.
//src/router/routes.js
import login from "../view/login";
import main from "../view/main";
const routes=[
{
path:'/',
redirect:"/login"
},
{
path:"/login",
component:login
},
{
path:"/main",
component:main
}
]
export default routes;
##About
router-routerview is a lightweight, extensive state based riot.js router for tag views. It was designed after the ui-router project, with all the quirks of riot.js.
This project makes use of the HTML5 history api, using pushState under the hood; in other words this is a client sided router.
// src/App.js
return (
<BrowserRouter>
<RouterView routes={routes}></RouterView>
</BrowserRouter>
)
// src/component/islogin.js
import React,{Component} from 'react'
function islogin(Main){
return class extends Component{
state ={
islogin:false
}
componentDidMount(){
let token = localStorage.getItem("token")
if(token){
this.setState({
islogin:true
})
}else{
this.props.history.push('/login')
}
}
render(){
let {islogin} = this.state
return islogin ? <Main {...this.props}></Main> : <div>loading...</div>
}
}
}
export default islogin
###jwt.sign({data},this.config.keys,{expiresIn:"4h"})
let { username, password } = this.state
axios.post("/login", { username, password }).then(data => {
//get token
let token = data.data.token;
//localStorage token
localStorage.setItem("token", token);
//jump router
this.props.history.push("/main");
});
This project makes use of the HTML5 history api, based on immutable-js. if you need to route asynchronously, try set skipRendering to true during loading undefined
async getInfo(){
let {token} = this.ctx.request.body
let data = jwt.verify(token,this.config.keys).res //{ id: 1, identity: 'v0', username: 'super', password: '123' }
let res ={identityId:data.identity}
let {identity} =data // v0
let identityData = await this.app.mysql.get('identity',{id:identity}) //{ identity: 'SuperUser', id: 'v0', access: '1,2,3' }
res.user=identityData.identity // {user:SuperUser}
let {access} =identityData // '1,2,3'
let sql = `select * from access where ${access.split(',').map(item=>`id=${item}`).join(" or ")}`
let accessData =await this.app.mysql.query(sql)
console.log(accessData)
res.btnList=accessData
this.ctx.body=res
}
//Click OK to judge whether the header is added or edited for different operations
handleOk = () => {
let { listname, listtel, title, editID } = this.state
//add
if (title === "add") {
axios.post('/add', { listname, listtel }).then(res => {
console.log(res)
})
this.setState({
show: false,
})
// update
} else if (title === "update") {
//phone /zhengze/
let reg = /^1[3-5|7-8][0-9]{9}$/
if (!reg.test(listtel)) {
alert("write error")
return
}
let obj = {
name: listname,
tel: listtel,
id: editID
}
axios.post('edit', { obj }).then(res => {
console.log(res)
this.setState({
show: false
})
})
}
axios.get('/list').then(res => {
console.log(res)
this.setState({
listData: res.data.listData
})
})
}
//show
show = () => {
this.setState({
show: true,
title: "add", //add tianjia jiekou
listname: "",
listtel: ""
})
}
handleEdit = (item) => {
this.setState({
show: true,
title: "update",
listname: item.name,
listtel: item.tel,
editID: item.id
})
}
componentDidMount() {
let token = localStorage.getItem('token')
//login User qx
axios.post('/getInfo', { token }).then((res) => {
console.log(res)
this.setState({
user: res.data.user,
identityId: res.data.identityId,
btnlist: res.data.btnList
})
if (res.data.user === "SuperUser") {
this.setState({
add: true,
dels: true,
look: true,
edit: true
})
} else if (res.data.user === "User") {
this.setState({
add: false,
dels: false,
look: true,
edit: true
})
} else if (res.data.user === "keren") {
this.setState({
add: false,
dels: false,
look: true,
edit: false
})
}
})
//find shuju list
axios.get('/list').then(res => {
console.log(res)
this.setState({
listData: res.data.listData
})
})
}