如何在ReactJS NodeJS中将令牌传递到防御路由

时间:2020-07-01 10:21:37

标签: node.js reactjs jwt

我捍卫了需要jwt身份验证的获取路由 问题是我不知道如何在FE中传递令牌。

获取路线:

   //Get Home Page
app.get('/:username',verify, (req, res) => {
    Users.findAll()
        .then((users) => {
        console.log(users)
        res.sendStatus(200)
    })
        .catch((err) => console.log('--------err', err))
})

Verifytoken函数:

    const jwt = require('jsonwebtoken')

module.exports = function (req, res, next) {
    const token = req.header("auth-token")
    //If token is not presented
    if(!token) {
        return res.status(401).send('Access Denied')
    }
    try {
        const verified = jwt.verify(token,"secretKey")
        req.user = verified;
        next();
    } catch (err) {
        res.status(400).send("Invalid Token")
        next();
    }

这是我的FE端。这有点奏效,当我尝试不登录而进入hompage时,它使我无法访问,但是,无论何时我尝试登录,这都是垃圾邮件,我拒绝了访问。

在FE上获取路线:

 useEffect(() => {
    axios
        .get(`http://localhost:4000/${localStorage.getItem('username')}`)
        .then((res) => {
            toast.info('Successful login')
            console.log('--------res.data', res.data);
        })
        .catch((err) => {
            console.log("err", err);
            toast.info('You must Log In')
            history.push('/login')
        });
})

这是另一个组件中的日志:

    const submitLogin = () => {
    let usernameValue  = usernameEl.current
    let passwordValue = passwordEl.current

    if (usernameValue && passwordValue) {
      if(usernameValue.value === "" || passwordValue.value === "") {
        toast.info('Invalid login')
      } else {
        //Axios Request
        localStorage.setItem("username",usernameValue.value)
        axios.post(`http://localhost:4000/logIn`,{
          username : usernameValue.value,
          password : passwordValue.value
        })
            .then(
                res => {
                console.log('--------res', res);
                localStorage.setItem('auth-token',res.data)
                history.push('/homepage')
            })
            .catch(
                err => {
                  console.log('--------err', err)
                  toast.info('Invalid Login')}
            )
      }
    }
  }

0 个答案:

没有答案