React 或 Node 中的用户登录名和角色？

Question

I'm building a new application that is using the full mern stack and I'm stuck on the best practice regarding protected routes, login/register and creating ACL user roles.

I'm used to doing this in node with something like passport or jwt but with react having its own router I'm reading that there are ways to also protect routes in react itself. What's the best way to proceed with the development and setting up user roles with a full MERN stack?

Thanks

Answer 1

Some ways you might go about it are:

1. Pass the permissions to React and have permissions logic in there
2. Have React call your API for permission based views.

Doing number one or two can be encapsulated in a similar way

If you want to show hide based on permissions.

class CanUserView extends Component {
    state = {allowed: false}
    componentDidMount(){
        this.checkPermissions()
    }
    async checkPermssions() {
        //This is where the two strategies can differ.
        //Either
        Api.checkPermission(this.props.permission);
        //Or
        this.props.user.permissions.includes(permission)

    }
    render(){
        if(this.state.allowed){
            return this.props.children
        } else {
            return null;
        }

    }
}

Then you can use it in your code like

<CanView permission={"Admin"}>
    <AdminComponent />
</CanView>

Of Course this doesn't hide the code from users without permissions. If you want that sort of use case you would probably need to render on the server side and only import allowed JS files.

Answer 2

I think the best way to protect routes is creating a ProtectedRoute component.

An example: (note: you can change the logic if the user is logged in or not, here I use a service as an example, you can do whatever your want, maybe check a token in localStorage)

import React from "react";
import { Route, Redirect } from "react-router-dom";
import authService from "../../services/auth-service";

export const ProtectedRoute = ({
  path,
  component: Component,
  auth,
  render,
  ...rest
}) => {
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (authService.isAuthenticated()) {
          return Component ? <Component {...props} /> : render(props);
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

And in your route definitions, instead of Route you can use this component, like the following:

 <ProtectedRoute path="/protected-zone" exact component={YourProtectedComponent} />

Extending this idea, you can create different ProtectedRoute components for different roles.

Hope this helps.