Javascript 如何在每次刷新页面时加载用户？

如何为此制作相关的asp.net控制器？ 我还向App.js添加了“加载用户”功能。我想要的是在每次刷新页面时加载用户。登录功能工作正常，但刷新页面后，身份验证将再次为空

"export const loadUser = () => async (dispatch) => {
 if (localStorage.token) {
   setAuthToken(localStorage.token);
     
}

 try {
  const res = await axios.get('https://localhost:5001/api/auth/user');
   dispatch({
    type: USER_LOADED,
    payload: res.data,
   });
} catch (err) {
   dispatch({
     type: AUTH_ERROR,
 });
}
};"

这是登录页面

import React, { useState } from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Paper from '@material-ui/core/Paper';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import { pink } from '@material-ui/core/colors';
import { connect } from 'react-redux';
import { setAlert } from '../../actions/alert';
import PropTypes from 'prop-types';
import {login} from '../../actions/auth'
import { Redirect } from 'react-router-dom'

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="primary" href="./">
        NoQueue Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
  },
  image: {
    backgroundImage: 'url(https://invention.si.edu/sites/default/files/styles/story_banner_image/public/blog-guest-fox-susannah-2017-03-09-shutterstock_189632216-banner-edit.jpg?itok=eNxGJoO4)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection:'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: pink.A700,
  },
  form: {
    width: '100%',
    marginTop: theme.spacing(2),
  },
  submit: {
    margin: theme.spacing(3,0,2),
  },

}));

const SignIn = ({setAlert,login,isAuthenticated,user}) => {

  const [formData, setFormData] = useState({
    email:"",
    password:"",
  })

const{email,password}=formData; 

const onChange=e=>setFormData(
  {
    ...formData, [e.target.name]:e.target.value
  }
)

const onSubmit=async e=>{

  e.preventDefault();
  if (email && password) {
    login(email,password)
  
  }
        else{
          setAlert('Please fill all the fileds','warning');
        }
      }

     

  const classes = useStyles();


  if(isAuthenticated){

//if(user.role === 'User')
//return <Redirect to="/index"/>
//else if(
//user.role ==='Admin'
//)
    return <Redirect to="/business"/>
  }

  return (
    <Grid container component="main" className={classes.root}>
     
      <Grid item xs={false} sm={4} md={7} className={classes.image} />

      <Grid item xs={12} sm={8} md={5} component={Paper} square>
        <div className={classes.paper}>

          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>

          <Typography component="h1" variant="h5">
            Sign in
          </Typography>

          <form onSubmit = { e=>onSubmit(e)} className={classes.form} noValidate>
            <TextField
            onChange={e=>onChange(e)}
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              value={email}
            />

            <TextField
            onChange={e=>onChange(e)}
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              value={password}
            />

            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />

            <Button
              type="submit"
              fullWidth
              variant="contained"
              color="Primary"
              className={classes.submit}
            >
              Sign In
            </Button>

            <Grid container>
              <Grid item xs>
                <Link href="forgotpassword" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>

                <Link href="signup" variant="body2">
                  {"Not a member? Sign Up"}
                </Link>
              </Grid>
            </Grid>
            
            <Box mt={5}>
              <Copyright />
            </Box>

          </form>
        </div>
      </Grid>
    </Grid>
  );
}

SignIn.propTypes={
  login:PropTypes.func.isRequired,
  setAlert:PropTypes.func.isRequired,
  isAuthenticated:PropTypes.bool,
  user: PropTypes.object.isRequired,
};

const mapStateToProps=state=>({
  isAuthenticated:state.auth.isAuthenticated,
  user: state.auth.user,
})


export default connect(mapStateToProps,{login,setAlert})(SignIn);

import React，{useState}来自“React”；
从“@material ui/core/Avatar”导入化身；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/FormControlLabel”导入FormControlLabel；
从“@material ui/core/Checkbox”导入复选框；
从“@material ui/core/Link”导入链接；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Box”导入框；
从“@material ui/core/Grid”导入网格；
从“@material ui/icons/LockOutlinedIcon”导入LockOutlinedIcon；
从“@material ui/core/Typography”导入排版；
从'@material ui/core/styles'导入{makeStyles}；
从'@material ui/core/colors'导入{pink}；
从'react redux'导入{connect}；
从“../../actions/alert”导入{setAlert}；
从“道具类型”导入道具类型；
从“../../actions/auth”导入{login}
从“react router dom”导入{Redirect}
函数版权（）{
返回(
{'Copyright}
NoQueue网站
{' '}
{新日期（）.getFullYear（）}
{'.'}
);
}
const useStyles=makeStyles（（主题）=>({
根目录：{
高度：“100vh”，
},
图片：{
背景图片：“url”(https://invention.si.edu/sites/default/files/styles/story_banner_image/public/blog-guest-fox-susannah-2017-03-09-shutterstock_189632216-banner-edit.jpg?itok=eNxGJoO4)',
背景尺寸：'封面'，
背景位置:"中锋",，
},
论文：{
边距：主题。间距（8,4），
显示：“flex”，
flexDirection:“列”，
对齐项目：“居中”，
},
化身：{
边距：主题。间距（1），
背景颜色：粉红色.A700，
},
表格：{
宽度：“100%”，
marginTop：主题。间距（2），
},
提交：{
边距：主题。间距（3,0,2），
},
}));
const SignIn=（{setAlert，login，isAuthenticated，user}）=>{
常量[formData，setFormData]=useState({
电邮：“，
密码：“”，
})
const{email，password}=formData；
const onChange=e=>setFormData(
{
…formData[e.target.name]：e.target.value
}
)
const onSubmit=async e=>{
e、 预防默认值（）；
如果（电子邮件和密码）{
登录（电子邮件、密码）
}
否则{
setAlert（'请填写所有文件'，'警告'）；
}
}
const classes=useStyles（）；
如果（未经验证）{
//如果（user.role==='user'）
//返回
//否则如果(
//user.role==='Admin'
//)
返回
}
返回(
登录
onSubmit（e）}className={classes.form}noValidate>
onChange（e）}
variant=“概述”
margin=“正常”
必修的
全宽
id=“电子邮件”
label=“电子邮件地址”
name=“电子邮件”
值={email}
/>
onChange（e）}
variant=“概述”
margin=“正常”
必修的
全宽
name=“密码”
label=“密码”
type=“密码”
id=“密码”
值={password}
/>
登录
忘记密码了？
{“不是会员？注册”}
);
}
签名类型={
登录名：PropTypes.func.isRequired，
setAlert:PropTypes.func.isRequired，
已验证：PropTypes.bool，
用户：PropTypes.object.isRequired，
};
常量mapStateToProps=状态=>({
isAuthenticated:state.auth.isAuthenticated，
用户：state.auth.user，
})
导出默认连接（MapStateTops，{login，setAlert}）（SignIn）；

我认为在redux的初始状态下，您需要检查localStorage.token是否为null/过期，并将其设置回user。因此，每当您刷新页面时，用户da仍然可以加载

我能够通过使用jwt_解码解决上述问题

  if (localStorage.token) {
    setAuthToken(localStorage.token);
    var decoded = jwt_decode(localStorage.token);
   
}

  try {
   const res = await axios.get(`https://localhost:5001/api/auth/user/${decoded.Id}`);
    dispatch({
     type: USER_LOADED,
     payload: res.data,
    });
 } catch (err) {
    dispatch({
      type: AUTH_ERROR,
  });
}
};

---

看起来这个问题与

C

无关。请查看该标记。您不需要每次都从控制器加载用户。将身份验证数据存储到本地存储器，即cookie，然后检查该数据。如果你在成功登录后发布加载主页的代码，我将向你展示如何操作我已经添加了登录页面。