Django jwt и React перенаправляют на разные страницы для разных пользователей после входа в систему

У меня есть 2 роли - член и сотрудник, и я хочу перенаправлять на разные страницы в зависимости от роли пользователя, используя имя пользователя и пароль, например, после входа в систему как член перенаправлять на страницу члена, а как сотрудник перенаправлять на страницу onlystaff. Как я могу это сделать. Я использую React Django JWT и Material UI. Извините за мой плохой английский

код:

axios.js

const baseURL = 'http://127.0.0.1:8000/api/';

const axiosInstance = axios.create({
    baseURL: baseURL,
    timeout: 5000,
    headers: {
        Authorization: localStorage.getItem('access_token')
            ? 'JWT ' + localStorage.getItem('access_token')
            : null,
        'Content-Type': 'application/json',
        accept: 'application/json',
    }, 
});

axiosInstance.interceptors.response.use(
    (response) => {
        return response;
    },
    async function (error) {
        const originalRequest = error.config;

        if (typeof error.response === 'undefined') {
            alert(
                'A server/network error occurred. ' +
                    'Looks like CORS might be the problem. ' +
                    'Sorry about this - we will get it fixed shortly.'
            );
            return Promise.reject(error);
        }

        if (
            error.response.status === 401 &&
            originalRequest.url === baseURL + 'token/refresh/'
        ) {
            window.location.href = '/login/';
            return Promise.reject(error);
        }

        if (
            error.response.data.code === 'token_not_valid' &&
            error.response.status === 401 &&
            error.response.statusText === 'Unauthorized'
        ) {
            const refreshToken = localStorage.getItem('refresh_token');

            if (refreshToken) {
                const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
                const now = Math.ceil(Date.now() / 1000);
                console.log(tokenParts.exp);

                if (tokenParts.exp > now) {
                    return axiosInstance
                        .post('/token/refresh/', { refresh: refreshToken })
                        .then((response) => {
                            localStorage.setItem('access_token', response.data.access);
                            localStorage.setItem('refresh_token', response.data.refresh);

                            axiosInstance.defaults.headers['Authorization'] =
                                'JWT ' + response.data.access;
                            originalRequest.headers['Authorization'] =
                                'JWT ' + response.data.access;

                            return axiosInstance(originalRequest);
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    console.log('Refresh token is expired', tokenParts.exp, now);
                    window.location.href = '/login/';
                }
            } else {
                console.log('Refresh token not available.');
                window.location.href = '/login/';
            }
        }

        return Promise.reject(error);
    }
);

export default axiosInstance;

Log-in.js

export default function LogIn() {
    let history = useHistory();
    const initialFormData = Object.freeze({
        username: '',
        password: '',
    });

const [formData, updateFormData] = useState(initialFormData);

const handleChange = (e) => {
    updateFormData({
        ...formData,
        [e.target.name]: e.target.value.trim(),
    });
};

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);

    axiosInstance
        .post(`token/`, {
            username: formData.username,
            password: formData.password,
        })
        .then((res) => {
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            axiosInstance.defaults.headers['Authorization'] =
                'JWT ' + localStorage.getItem('access_token');
                history.push("/home");
            
        });
};
return (
    <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, padding: 2 }}>
      <TextField
           margin="normal"
           required
           id="username"
           label="username"
           name="username"
           autoComplete="username"
           autoFocus
           onChange={handleChange}/>

      <TextField
        margin="normal"
        required
        name="password"
        label="password"
        type="password"
        id="password"
        autoComplete="current-password"
        onChange={handleChange}/>
                        
         <Button type="submit" onClick={handleSubmit}>
                 LOG IN
          </Button>            
          </Box>    
);}

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('core.urls')),
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

После получения токена вы можете получить данные о пользователе, чтобы узнать, к какой группе он принадлежит.

Шаги:

  1. handleLogin() для получения токена
  2. getTokenDetail() для получения информации о пользователе на основе логина

Функция handleLogin на передней панели

const handleLogin = () => {
    axios
      .post("/auth/token/login/", {
        username: email,
        password: password,
      })
      .then((res) => {
        const resAuthToken = res.data.auth_token;

        // Get user Details
        getTokenDetail(resAuthToken).then((res) => {
          
        // Do your redirects with user info...
          
     
        });
      })
      .catch((e) => {
        console.log(e)
      });
};

Функция getTokenDetail:

import axios from "axios";

export const getTokenDetail = (authToken) => {
  return axios.get("/api/users/token_detail", {
    headers: {
      Authorization: `Token ${authToken}`,
    },
  });
};

И, наконец, представление Django для получения информации о пользователе на основе детализации вашего токена:

def token_detail(request):
    if request.method == "GET" :
        token = request.META['HTTP_AUTHORIZATION'].replace("Token ", "")
        auth_token = Token.objects.get(key=token)
        user = auth_token.user
        response = UserSerializer(user)
        return JsonResponse(response.data, safe=False, status=200)
    else:
        return HttpResponse(status=405)
Вернуться на верх