【express】Express与React协同处理跨域问题与权限问题

最新推荐文章于 2024-04-27 20:07:47 发布

原创最新推荐文章于 2024-04-27 20:07:47 发布 · 523 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #nodejs

Node 同时被 2 个专栏收录

11 篇文章

订阅专栏

React

8 篇文章

订阅专栏

本文详细介绍如何使用CORS插件解决跨域问题，并通过JSON Web Tokens实现权限验证，确保前后端开发的安全性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、处理跨域问题

通过cors插件处理跨域

npm install cors

在express框架里的app.js，引入cors

var cors = require('cors');
···
app.use(cors());
···

在react的store管理文件中

import { observable, action } from 'mobx';
import axios from 'axios';
import { objectID } from 'bson';

import api from '../util/api';

const APIBASE = 'http://[ip]:3001/';

class store {
    @action async index_post() {
        let params = {};
        const { data } = await api.post(APIBASE);
        console.log(data);
    }
}

export default new store();

在index.jsx文件中加载这个方法

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject("store")
@observer
class Index extends React.Component {
    componentDidMount() {
        this.props.store.index_post();
    }
    render() {
        return (<div>Index</div>)
    }
}

export default Index;

即可实现跨域请求

2、权限问题

通过jsonwebtoken处理权限问题

npm install jsonwebtoken

在express生成的项目文件夹根目录下新建lib/AuthError.js

module.exports = class AuthError extends Error {
    constructor(message) {
        super(message);
        this.name = 'AuthError';
        this.status = 200;
        this.message = '-NOTLOGIN-';
    }
}

在app.js中引入

const AuthError = require("./lib/AuthError");

function checkJwt(req, res, next) {
    const token = req.query.token || req.body.token;
    const jwt = require('jsonwebtoken');
    try {
        const decode = jwt.verify(token, process.env.SECRET);
        if (decode.is_admin) next();
        else throw new AuthError("错误的token");
    } catch {
        throw new AuthError("错误的token");
    }
}

app.use('/', checkJwt, indexRouter);
app.use('/users', checkJwt, usersRouter);

在路由的中间键中使用checkJwt，运行起来

{"error":"-NOTLOGIN-"}

在react项目文件夹下新建util/api.js

import axios from 'axios';

class api {
    token = '';
    setToken(token) {
        this.token = token;
    }

    async post(url, params) {
        var params = new URLSearchParams(params);
        params.append("token", this.token);

        const data = await axios.post(url, params);
        console.log(data.data);

        if (data.data && data.data.error && data.data.error == '-NOTLOGIN-') window.location = '/login';

        return data;
    }
}

export default new api();

在store.js中引入

import api from '../util/api';

class store {
    @action async index_post() {
        let params = {};
        const { data } = await api.post(APIBASE);
        console.log(data);
    }
}

http://127.0.0.1:3000会直接定位到http://127.0.0.1:3000/login

具体源码见Github地址