{"id":416712,"date":"2024-06-30T01:07:22","date_gmt":"2024-06-30T01:07:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=416712"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=416712","title":{"rendered":"<span>\u041a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 Django \u0437\u043d\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 React \u0432 \u043b\u0438\u0446\u043e, \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/post\/512526\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u044f \u043f\u0438\u0441\u0430\u043b \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0431\u0435\u0437\u0434\u0443\u043c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043d\u0430 JWT. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0443\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e, \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0432 React \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0435 \u0432 \u0441\u0435\u0431\u044f \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u0438\u043b\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 Django \u0441\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043b\u043e\u0433\u0438\u043d\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435? \u041e\u0431\u0437\u043e\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0439 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u0441\u0445\u0435\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/on\/73\/qf\/on73qftexoofpohdh0rg3pr0gya.jpeg\" alt=\"main\" data-src=\"https:\/\/habrastorage.org\/webt\/on\/73\/qf\/on73qftexoofpohdh0rg3pr0gya.jpeg\" data-blurred=\"true\"\/><\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0435 \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0442\u043e \u043f\u043e\u0441\u043b\u0430\u043b \u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u0438\u043a\u0443, \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u0435, \u043d\u043e\u043c\u0435\u0440\u0443 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430, \u043d\u0435 \u0432\u0430\u0436\u043d\u043e. \u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0432\u044b\u0434\u0430\u0435\u0442 \u0441\u0435\u0431\u044f \u0437\u0430 \u043a\u043e\u0433\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u2014 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043f\u0430\u0440\u043e\u043b\u044e, \u0441\u0435\u0440\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u0443 \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e\u043a\u0435\u043d\u0443. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u043c\u043e\u0447\u0438\u044f \u043f\u043e\u0441\u043b\u0430\u0432\u0448\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435. \u0418\u043c\u0435\u043d\u043d\u043e \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0448\u0430\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0430\u0434\u0438\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0435\u043b\u044c\u0437\u044f \u0436\u0435 \u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435 \u0441\u0432\u043e\u0438 \u043b\u0438\u0447\u043d\u044b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0443\u0436\u0438\u0435 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0432\u0430\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u044f\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043f\u043e\u043f\u044b\u0442\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u0431\u0443\u0434\u044c \u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u043b\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435) \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0437\u0430\u043c\u0435\u043d, \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0432\u0430\u0441 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u0438 \u043d\u0435 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043d\u043e\u0432\u0430, \u0432\u0435\u0434\u044c \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e. \u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0445 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u0445\u0435\u043c\u0430\u0445 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0431\u043c\u0435\u043d \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0432\u0438\u0434\u0435. \u0425\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 https \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0435 \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<h1 id=\"predustanovka\">\u041f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/h1>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438\u0445 \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u0430\u0434\u0435\u043b\u0435\u0446 \u043f\u0440\u043e\u0444\u0438\u043b\u044f, \u0437\u043d\u0430\u044e\u0449\u0438\u0439 \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0441\u0430\u043c\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 django-\u0430\u0434\u043c\u0438\u043d\u043a\u0438. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c\u0441\u044f \u0441 \u043f\u0430\u043f\u043a\u043e\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043d\u0435\u0439 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 python \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e, \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">pip install django pip install django-rest-framework<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 python 3.7.2, django 3.2.7, django-rest-framework 3.12.4.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0435\u043c django-\u043f\u0440\u043e\u0435\u043a\u0442 <code>server<\/code> \u0438 django-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>core<\/code>. \u0411\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0432\u0438\u0436\u043e\u043a SQLite \u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>db.sqlite3<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u043e\u043b\u044c <code>pass1234!<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">django-admin startproject server cd server django-admin startapp core python3 .\/manage.py migrate python3 .\/manage.py createsuperuser --username admin --email admin@example.com<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432\u043e\u0442 \u043d\u0430\u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0440\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>server\/server\/settings.py<\/code> \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <code>INSTALLED_APPS<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> INSTALLED_APPS = [ +    'core', +    'rest_framework',      'django.contrib.admin',      'django.contrib.auth',<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 <code>server\/core<\/code> \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>serializers.py<\/code> \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c <a href=\"https:\/\/www.django-rest-framework.org\/tutorial\/1-serialization\/#creating-a-serializer-class\" rel=\"nofollow noopener noreferrer\">\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441 \u043f\u043e\u043b\u044f \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">from rest_framework.serializers import ModelSerializer from django.contrib.auth.models import User  class UserSerializer(ModelSerializer):      class Meta:         model = User         fields = ['username', 'first_name', 'last_name', 'email', 'date_joined']<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 server\/core\/views.py \u0438 \u043f\u0438\u0448\u0435\u043c \u0432 \u043d\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">from rest_framework.request import Request from rest_framework.response import Response from rest_framework.decorators import api_view from core.serializers import UserSerializer  @api_view() def user(request: Request):     return Response({         'data': UserSerializer(request.user).data     })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c server\/server\/urls.py, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c endpoint, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0434\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> from django.contrib import admin  from django.urls import path +from core import views   urlpatterns = [      path('admin\/', admin.site.urls), +    path('api\/user', views.user, name='user')  ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0437 \u043f\u0430\u043f\u043a\u0438 <code>server<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">python3 .\/manage.py runserver<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 <code>http:\/\/localhost:8000\/api\/users\/<\/code>. \u0412 \u043e\u0442\u0432\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c <code>{\"data\": {\"username\": \"\"}}<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0441 \u043a\u0430\u043a \u0430\u043d\u043e\u043d\u0438\u043c\u0430. \u0412 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u043e\u043a\u0430 \u043d\u0435\u0447\u0435\u0433\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0435\u0439 \u043f\u043e\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0437\u043d\u0430\u043b \u043d\u0430\u0441 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <code>admin<\/code>.<\/p>\n<p>  <\/p>\n<h1 id=\"basic\">Basic<\/h1>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0445\u0435\u043c\u0443 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c Basic. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0430\u044f \u0441\u0445\u0435\u043c\u0430, \u043d\u043e \u044d\u0442\u043e <a href=\"https:\/\/www.rfc-editor.org\/rfc\/rfc7617.html#section-4\" rel=\"nofollow noopener noreferrer\">\u043d\u0435 \u043f\u0440\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c<\/a> \u0438 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438\u043a\u043e\u0440\u043f\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 legacy.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a\u0430\u044f \u0442\u0443\u0442 \u0431\u044b\u043b\u0430 \u0431\u044b \u0443\u043c\u0435\u0441\u0442\u043d\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044f\u2026 \u0410\u0445 \u0434\u0430, \u0435\u0441\u043b\u0438 \u0431\u044b \u0433\u043e\u043b\u043e\u0432\u0430 \u043e\u0442\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u043b\u0430\u0441\u044c \u043e\u0442 \u0442\u0443\u043b\u043e\u0432\u0438\u0449\u0430, \u0442\u043e \u043e\u043d\u0430 \u0438 \u0431\u044b\u043b\u0430 \u0431\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u043c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0442\u0443\u0442 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u0433\u043e\u043b\u043e\u0432\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u0433\u0434\u0435-\u043d\u0438\u0431\u0443\u0434\u044c, \u0435\u0451 \u043c\u043e\u0433\u0443\u0442 \u0443\u043a\u0440\u0430\u0441\u0442\u044c \u0438 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0433\u043e\u043b\u043e\u0432\u0443 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u043e\u043c \u043d\u0435\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c\u044b\u043c.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0431\u0435\u0440\u0435\u043c \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c, \u0441\u043a\u043b\u0435\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u0438 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e \u0434\u0432\u043e\u0435\u0442\u043e\u0447\u0438\u044e, \u0432\u043e\u0442 \u0442\u0430\u043a <code>admin:pass1234!<\/code>, \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u043c \u0432 base64, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c <code>YWRtaW46cGFzczEyMzQh<\/code>. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>Authorization<\/code>. \u041a\u0430\u043a-\u0442\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">Authorization: Basic YWRtaW46cGFzczEyMzQh<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0440\u0430\u0441\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e, \u043d\u0430\u0439\u0434\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0432\u0435\u0440\u0438\u0442 \u043f\u0430\u0440\u043e\u043b\u044c \u0438 \u043b\u0438\u0448\u044c \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435. \u0421\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d \u2014 \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442 \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d, \u0432\u0435\u0434\u044c \u043d\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0440\u0430\u0444\u0438\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d.<\/p>\n<p>  <\/p>\n<h3 id=\"realizuem-shemu-na-servere\">\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0445\u0435\u043c\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/h3>\n<p>  <\/p>\n<p>\u041d\u0430\u0448\u0435\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 <code>user<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>server\/core\/views.py<\/code> \u043d\u0430\u0434\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: \u043d\u0435 \u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0430\u043d\u043e\u043d\u0438\u043c\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443 Basic. \u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043f\u0430\u0440\u0430 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432 django-rest-framework \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> from rest_framework.response import Response -from rest_framework.decorators import api_view +from rest_framework.decorators import api_view, permission_classes, authentication_classes +from rest_framework.permissions import IsAuthenticated +from rest_framework.authentication import BasicAuthentication  from core.serializers import UserSerializer   @api_view() +@permission_classes([IsAuthenticated]) +@authentication_classes([BasicAuthentication])  def user(request: Request):<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 <a href=\"https:\/\/www.django-rest-framework.org\/api-guide\/settings\/#default_authentication_classes\" rel=\"nofollow noopener noreferrer\">DEFAULT_AUTHENTICATION_CLASSES<\/a> \u0438 <a href=\"https:\/\/www.django-rest-framework.org\/api-guide\/settings\/#default_permission_classes\" rel=\"nofollow noopener noreferrer\">DEFAULT_PERMISSION_CLASSES<\/a>, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0430\u0434\u0440\u0435\u0441 <a href=\"http:\/\/localhost:8000\/api\/users\/\" rel=\"nofollow noopener noreferrer\">http:\/\/localhost:8000\/api\/users\/<\/a> \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043b\u043e\u0433\u0438\u043d\u0430\/\u043f\u0430\u0440\u043e\u043b\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/d3\/vc\/7l\/d3vc7llsv7mjrncha85oyuvnfok.png\" alt=\"sign-in-drf\" data-src=\"https:\/\/habrastorage.org\/webt\/d3\/vc\/7l\/d3vc7llsv7mjrncha85oyuvnfok.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u0432\u043e\u0434\u0438\u0442\u044c, \u0430 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043e\u0442\u043c\u0435\u043d\u044b, \u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432 \u043e\u0442\u0432\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">HTTP 401 Unauthorized Allow: OPTIONS, GET Content-Type: application\/json Vary: Accept WWW-Authenticate: Basic realm=\"api\"  {     \"detail\": \"Authentication credentials were not provided.\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0443\u0447\u0435\u0442\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445? \u041f\u043e \u043e\u0442\u0432\u0435\u0442\u0443. \u041a\u043e\u0434 401 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d, \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u0435\u0433\u043e \u043d\u0435 \u0443\u0437\u043d\u0430\u043b\u0438. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u0432\u0435\u0434\u044c \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u044c, \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e.<br \/>  \u0422\u0443\u0442 \u043c\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430\u0445 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 <a href=\"https:\/\/youtu.be\/fN25fMQZ2v0?t=2879\" rel=\"nofollow noopener noreferrer\">(\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432 \u044d\u0442\u043e\u043c \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u043c \u0432\u0438\u0434\u0435\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u0433\u043e\u0442\u043e\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e \u043a\u043e\u043d\u0446\u0430)<\/a> \u043a\u043e\u0434 \u043e\u0448\u0438\u0431\u043a\u0438 401 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0435\u0437\u0434\u0435, \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0431\u044f\u0437\u0430\u043d \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 <code>WWW-Authenticate<\/code> <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc7235#section-3.1\" rel=\"nofollow noopener noreferrer\">[RFC7235 3.1]<\/a>. \u0410\u0432\u0442\u043e\u0440\u044b \u043b\u0438\u0431\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0445\u043e\u0442\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u044b, \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u0433\u0434\u0435 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435\u0447\u0435\u0433\u043e.<br \/>  \u0412\u043e\u043e\u0431\u0449\u0435, \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043b\u044e\u0434\u044c\u043c\u0438.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041a: \u0414\u0430\u0439 \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443,<\/li>\n<li>\u0421: \u041d\u0435 \u0434\u0430\u043c!<\/li>\n<li>\u041a: \u041f\u043e\u0447\u0435\u043c\u0443? <em>\u0412\u043e\u043f\u0440\u043e\u0441 \u043f\u043e\u0432\u0438\u0441\u0430\u0435\u0442 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435<\/em><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041c\u044b \u043a\u0430\u043a \u0431\u044b \u0432 \u043d\u0435\u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043a\u0443\u0434\u0430 \u0435\u043c\u0443 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0434\u0442\u0438. \u0410 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>WWW-Authenticate<\/code>, \u043c\u044b \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u043c: &#171;\u0411\u0443\u0434\u044c\u0442\u0435 \u0434\u043e\u0431\u0440\u044b, \u043f\u043e\u043a\u0430\u0436\u0438\u0442\u0435, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u043a, \u0432\u044b\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u0448\u0435\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439&#187;.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u043c \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0442\u0432\u0435\u0442\u0430 \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 <code>WWW-Authenticate<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0439 \u0441\u0445\u0435\u043c\u044b, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e Basic, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/www.rfc-editor.org\/rfc\/rfc7235#section-2.2\" rel=\"nofollow noopener noreferrer\">realm<\/a>, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u042d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0432\u043e\u0437\u043d\u0438\u043a\u0448\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0442\u0430\u043a \u0438 \u0434\u0435\u043b\u0430\u0435\u0442, \u043d\u043e \u043d\u0430 \u044d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u043f\u0440\u0430\u0432\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u043e\u0442 \u0441\u0435\u0431\u044f.<br \/>  \u041d\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u0442\u0430\u043a, \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043a\u043e\u0434\u043e\u043c 401 \u043d\u0435\u043b\u044c\u0437\u044f, \u0442\u043e\u0433\u0434\u0430 \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0438\u0433\u0440\u0443 \u043a\u043e\u0434 403 \u0438 \u0440\u0430\u0437\u0433\u043e\u0432\u043e\u0440 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041a: \u0414\u0430\u0439 \u043c\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443,<\/li>\n<li>\u0421: \u0412\u0430\u043c \u0441\u044e\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f! \u0418\u0434\u0438\u0442\u0435, \u043a\u0443\u0434\u0430 \u043f\u043e\u0434\u0430\u043b\u044c\u0448\u0435!<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0440\u0433\u043d\u0443\u0442 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c\u2026 \u041a\u0440\u043e\u043c\u0435 \u043a\u0430\u043a \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u0432\u0435\u043b\u0435\u0433\u0438\u0439 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u0432\u0435\u0434\u0435\u043c \u043b\u043e\u0433\u0438\u043d\/\u043f\u0430\u0440\u043e\u043b\u044c \u0438 \u043d\u0430\u0436\u043c\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443. \u0410 \u0432 \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0441 \u0441\u0435\u0442\u0435\u0432\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Authorization.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">{     \"data\": {         \"username\": \"admin\",         \"first_name\": \"\",         \"last_name\": \"\",         \"email\": \"admin@example.com\",         \"date_joined\": \"2021-09-11T09:55:18.424800Z\"     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u043c\u044f \u0438 \u0444\u0430\u043c\u0438\u043b\u0438\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u044b. \u0427\u0442\u043e\u0431\u044b \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0431\u044b\u043b\u043e \u0447\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0437\u0430\u0439\u0442\u0438 \u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e django-\u0430\u0434\u043c\u0438\u043d\u043a\u0443 <code>http:\/\/localhost:8000\/admin<\/code> \u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u043f\u043e\u043b\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"sozdadim-klient\">\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c npm \u0438 <a href=\"https:\/\/create-react-app.dev\/docs\/getting-started\/\" rel=\"nofollow noopener noreferrer\">create-react-app<\/a>. \u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043f\u0430\u043f\u043a\u0435, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c react-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">create-react-app client<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435: npm 6.14.15, yarn 1.22.5, react 17.0.2.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0430\u043f\u043a\u0435 <code>client<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>package.json<\/code> \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u0435 <code>proxy<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441 CORS \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434. \u0422\u0430\u043a \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e \u0431\u044d\u043a\u0435\u043d\u0434 \u0438 \u043f\u043e\u0439\u043c\u0435\u0442, \u043a\u0443\u0434\u0430 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441, \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0430\u043c \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u0430\u0434\u0440\u0435\u0441.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">     \"eject\": \"react-scripts eject\"    }, +  \"proxy\": \"http:\/\/localhost:8000\",    \"eslintConfig\": {      \"extends\": [<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b <code>client\/src\/App.js<\/code> \u0438 \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0432 \u043d\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043f\u0440\u043e\u0444\u0438\u043b\u0435, \u043f\u043e\u043f\u0443\u0442\u043d\u043e \u0437\u0430\u0431\u0438\u0440\u0430\u044f \u0435\u0451 \u0441 \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041d\u0438\u0436\u0435 \u2014 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>App<\/code>, \u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e \u0438\u043c\u043f\u043e\u0440\u0442 <code>import { useState, useEffect } from 'react';<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">  const [ firstName, setFirstName] = useState('')   const [ lastName, setLastName] = useState('')   const [ username, setUsername] = useState('')   const [ email, setEmail] = useState('')   const [ dateJoined, setDateJoined] = useState('')   const [ error, setError] = useState()    useEffect(() => {     fetch('\/api\/user')       .then(response => {         if (response.ok) {           return response.json()         } else {           throw Error(`Something went wrong: code ${response.status}`)         }       })       .then(({data}) => {         setFirstName(data.first_name)         setLastName(data.last_name)         setUsername(data.username)         setEmail(data.email)         setDateJoined(data.date_joined)       })       .catch(error => {         console.log(error)         setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438')       })   }, [])    return (     &lt;div className=\"App\">       {error?         &lt;p>{error}&lt;\/p>       :         &lt;div className=\"Profile\">           &lt;h1>{firstName} {lastName}&lt;\/h1>           &lt;h2>{username}&lt;\/h2>           &lt;p>email: {email}&lt;\/p>           &lt;p>\u041f\u0440\u043e\u0444\u0438\u043b\u044c \u0441\u043e\u0437\u0434\u0430\u043d {dateJoined}&lt;\/p>         &lt;\/div>       }     &lt;\/div>   );<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0438\u0437 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0432 \u043f\u0430\u043f\u043a\u0435 <code>client<\/code> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">yarn start<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 python \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c <code>http:\/\/localhost:3000\/<\/code>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/i1\/rb\/cg\/i1rbcguze-xc1u_cgfmkardpg0y.png\" alt=\"sign-in-react\" data-src=\"https:\/\/habrastorage.org\/webt\/i1\/rb\/cg\/i1rbcguze-xc1u_cgfmkardpg0y.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0412\u0432\u0435\u0434\u044f \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c, \u0443\u0432\u0438\u0434\u0438\u043c \u0441\u0430\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/r1\/yh\/ex\/r1yhexw1snlkivlkm3_sn4wisyo.png\" alt=\"profile-page\" data-src=\"https:\/\/habrastorage.org\/webt\/r1\/yh\/ex\/r1yhexw1snlkivlkm3_sn4wisyo.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u0435 \u0448\u0438\u0431\u043a\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u0440\u043e\u043c\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a django-\u0430\u0434\u043c\u0438\u043d\u043a\u0435, \u0434\u0430\u0436\u0435 \u0437\u0430\u0433\u0435\u0440\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043b\u044c\u0437\u044f. \u041d\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u0441\u0443\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043f\u043b\u044e\u0441\u043e\u0432 \u2014 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f. \u0422\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u0438\u043c \u0441\u043d\u0430\u0431\u0436\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c <code>Authorization<\/code>, \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c base64-\u0441\u0442\u0440\u043e\u0447\u043a\u0443. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0441\u0430\u043c, \u043c\u044b \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0432\u0432\u0435\u043b\u0438 \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0438 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e realm \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043d\u0430\u0431\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c\u0438 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0441\u0435\u0441\u0441\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u044b\u0442\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u044b\u0442\u043e \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u043d\u043e\u0432\u0430.<\/p>\n<p>  <\/p>\n<p>\u0418 \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f. <a href=\"https:\/\/www.django-rest-framework.org\/api-guide\/authentication\/#basicauthentication\" rel=\"nofollow noopener noreferrer\">\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 django-rest-framework \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442<\/a> \u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043d\u043e\u0432\u043e. \u0427\u0442\u043e \u0431\u044b \u043c\u044b \u043d\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438, \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u0440\u0438\u0441\u043a\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0435 \u0434\u043b\u044f \u043d\u0430\u0441. \u0425\u043e\u0442\u044f, \u0432 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0433\u0434\u0430 \u0442\u043e\u043b\u044c\u043a\u043e-\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043b\u0430\u0436\u0438\u0432\u0430\u043b\u043e\u0441\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u043e\u043f\u0446\u0438\u044f. \u041b\u0438\u0448\u044c \u043f\u043e\u0442\u043e\u043c \u044f \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0441\u044f&#8230;<\/p>\n<p>  <\/p>\n<h2 id=\"token\">Token<\/h2>\n<p>  <\/p>\n<p>\u041d\u0435\u0442, \u043f\u0440\u043e \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u043d\u0430\u043b. \u041f\u043e-\u043c\u043e\u0435\u043c\u0443, \u043e\u043d \u0432\u0435\u0441\u044c\u043c\u0430 \u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0438 \u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0435\u0433\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u043e \u0441\u0447\u0435\u0442\u0443. \u042f \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0437\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u043b\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443 \u043e\u0442 IEFT <a href=\"https:\/\/tools.ietf.org\/id\/draft-hammer-http-token-auth-01.html\" rel=\"nofollow noopener noreferrer\">&#171;HTTP Authentication: Token Access Authentication&#187;<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0442\u043e\u043a\u0435\u043d\u0430\u0445 bearer, \u0442.\u0435. \u043d\u0430 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u0438\u0442\u0435\u043b\u044f. \u041e\u043d\u0438 \u0432\u044b\u043f\u0443\u0449\u0435\u043d\u044b \u0434\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430, \u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u043e \u0441\u043b\u043e\u0432\u043e token \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u0430\u043a \u0437\u043d\u0430\u043a, \u0436\u0435\u0442\u043e\u043d, \u043c\u0435\u0442\u043a\u0430. \u0422.\u0435. \u044d\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0441\u0445\u0435\u043c\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u0441\u0441\u0438\u044f \u0438\u043b\u0438 \u0441\u0435\u0430\u043d\u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u043e\u043a\u0435\u043d \u0441\u0435\u0441\u0441\u0438\u0438, \u0430\u0439\u0434\u0438\u0448\u043d\u0438\u043a \u0441\u0435\u0441\u0441\u0438\u0438 \u2014 \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0434\u043d\u043e. \u0421\u0445\u0435\u043c\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u0442\u043e\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435, \u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0432 \u044f\u0432\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 \u0442\u0435\u043b\u0435 POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c. \u0417\u0430\u0442\u0435\u043c, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043a\u0435\u043d, \u043f\u0443\u0441\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 40 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0431\u0443\u043a\u0432 \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435 \u0438\u043b\u0438 \u0446\u0438\u0444\u0440 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0432\u0435\u0442\u0435. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c <code>Authorization: Token ${token}<\/code>. \u041f\u043e\u043b\u0443\u0447\u0430\u044f \u044d\u0442\u043e\u0442 \u0442\u043e\u043a\u0435\u043d, \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0439 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u0431\u0443\u043c\u0430\u0436\u043d\u044b\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043d\u043e\u043c\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u043b\u0438\u0447\u043d\u043e\u043c \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438, \u0430 \u043f\u0435\u0440\u0435\u0434 \u0441\u0430\u043c\u0438\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0438 \u0441\u0432\u0435\u0440\u044f\u044e\u0442 \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0435\u0433\u043e \u0432 \u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043a\u043d\u0438\u0433\u0435 \u0443\u0447\u0435\u0442\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u043a, \u043d\u0435 \u0431\u0435\u0434\u0430: \u043e\u0431\u0440\u0430\u0442\u0438\u0432\u0448\u0438\u0441\u044c \u043b\u0438\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439, \u0430 \u0441\u0442\u0430\u0440\u044b\u0439 \u0432\u044b\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c \u0438\u0437 \u043a\u043d\u0438\u0433\u0438, \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0448\u0435\u0434\u0448\u0438\u0439\/\u043f\u043e\u0445\u0438\u0442\u0438\u0432\u0448\u0438\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0438\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<br \/>  \u041c\u044b \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u044c \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0435\u0433\u043e \u043d\u0435 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c, \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c, \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u043c \u043d\u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0423\u0437\u043d\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u2014 \u043d\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c, \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0434\u0430\u043b\u0438\u0432 \u0442\u043e\u043a\u0435\u043d \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f. \u0410 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0437\u0430 \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u043d\u0430\u0435\u0442 \u043f\u0430\u0440\u043e\u043b\u044c.<\/p>\n<p>  <\/p>\n<h3 id=\"kak-eto-vstroit-v-nashe-prilozhenie\">\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435?<\/h3>\n<p>  <\/p>\n<p>\u0421\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0437\u0434\u0435\u0441\u044c \u0432\u0435\u0441\u044c\u043c\u0430 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u0418 \u0442\u0443\u0442 \u0432\u0441\u0435 \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0437\u0430 \u043d\u0430\u0441, \u0432 django-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 <code>rest_framework.authtoken<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 <code>ISTALLED_APPS<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>server\/server\/settings.py<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> INSTALLED_APPS = [      'core',      'rest_framework', +    'rest_framework.authtoken',      'django.contrib.admin',      'django.contrib.auth',      'django.contrib.contenttypes',<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">python3 .\/manage.py migrate<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0443 \u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 <code>server\/core\/views.py<\/code> \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>BasicAuthentication<\/code> \u043d\u0430 <code>TokenAuthentication<\/code>. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-from rest_framework.authentication import BasicAuthentication +from rest_framework.authentication import TokenAuthentication<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-@authentication_classes([BasicAuthentication]) +@authentication_classes([TokenAuthentication])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c <code>http:\/\/localhost:8000\/api\/user<\/code><\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442\u0438\u043b\u0438 \u043d\u0430\u043c \u043e\u0448\u0438\u0431\u043a\u043e\u0439 401, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u043d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e, \u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0435\u0441\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> HTTP 401 Unauthorized  Allow: GET, OPTIONS  Content-Type: application\/json  Vary: Accept -WWW-Authenticate: Basic realm=\"api\" +WWW-Authenticate: Token   {      \"detail\": \"Authentication credentials were not provided.\"  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u043e\u043a\u0435\u043d \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043e\u043f\u044f\u0442\u044c \u043f\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e django-\u0430\u0434\u043c\u0438\u043d\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 <code>http:\/\/localhost:8000\/admin\/<\/code>, \u0437\u0430\u0442\u0435\u043c \u0449\u0435\u043b\u043a\u0430\u0435\u043c \u043f\u043e &#171;Tokens&#187; \u0438 \u043f\u043e\u0442\u043e\u043c &#171;Add token&#187;. \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0443\u043f\u0435\u0440\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0436\u043c\u0435\u043c &#171;Save&#187;. \u0423 \u0432\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u0432\u043e\u0439 \u0442\u043e\u043a\u0435\u043d, \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0442\u0430\u043a\u043e\u0439 <code>559b614f17c0450c4e28e2f55ec6cc7a473da822<\/code>, \u0435\u0433\u043e \u0438 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435. \u041d\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u043b\u0430\u043c\u0438 Django REST Framework \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">curl -H \"Authorization: Token 559b614f17c0450c4e28e2f55ec6cc7a473da822\" http:\/\/localhost:8000\/api\/user<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0436\u0435\u2026 \u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043c\u044b \u0442\u0430\u043a \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041d\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0441\u0435\u0431\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u0432\u044b\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0442\u043e\u043a\u0435\u043d\u044b. \u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043c \u044d\u0442\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 JSON \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 <code>username<\/code> \u0438 <code>password<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e POST-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>\/api\/login<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>server\/core\/serializers.py<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u0438 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@@ -1,5 +1,6 @@ -from rest_framework.serializers import ModelSerializer +from rest_framework.serializers import Serializer, ModelSerializer, CharField  from django.contrib.auth.models import User +from rest_framework.authtoken.models import Token   class UserSerializer(ModelSerializer): @@ -7,3 +8,17 @@      class Meta:          model = User          fields = ['username', 'first_name', 'last_name', 'email', 'date_joined'] + + +class IssueTokenRequestSerializer(Serializer): +    model = User + +    username = CharField(required=True) +    password = CharField(required=True) + + +class TokenSeriazliser(ModelSerializer): + +    class Meta: +        model = Token +        fields = ['key']<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 <code>server\/core\/views.py<\/code> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0448\u0435\u0433\u043e \u043b\u043e\u0433\u0438\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0442 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0438\u0445 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0438 \u0432\u044b\u0434\u0430\u0441\u0442 \u043b\u0438\u0431\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u043e\u043a\u0435\u043d, \u043b\u0438\u0431\u043e \u0437\u0430\u0432\u0435\u0434\u0435\u0442 \u043d\u043e\u0432\u044b\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@@ -1,9 +1,26 @@  from rest_framework.request import Request  from rest_framework.response import Response  from rest_framework.decorators import api_view, permission_classes, authentication_classes -from rest_framework.permissions import IsAuthenticated +from rest_framework.permissions import IsAuthenticated, AllowAny  from rest_framework.authentication import TokenAuthentication -from core.serializers import UserSerializer +from core.serializers import UserSerializer, IssueTokenRequestSerializer, TokenSeriazliser +from rest_framework.authtoken.models import Token +from django.contrib.auth import authenticate + + +@api_view(['POST']) +@permission_classes([AllowAny]) +def issue_token(request: Request): +    serializer = IssueTokenRequestSerializer(data=request.data) +    if serializer.is_valid(): +        authenticated_user = authenticate(**serializer.validated_data) +        try: +            token = Token.objects.get(user=authenticated_user) +        except Token.DoesNotExist: +            token = Token.objects.create(user=authenticated_user) +        return Response(TokenSeriazliser(token).data) +    else: +        return Response(serializer.errors, status=400)   @api_view()<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 <code>server\/server\/urls.py<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> urlpatterns = [      path('admin\/', admin.site.urls),      path('api\/user', views.user, name='user'), +    path('api\/login', views.issue_token, name='issue_token'),  ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0443 \u0430 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>client\/src\/App.js<\/code> \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0435\u0451 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@@ -2,6 +2,10 @@  import '.\/App.css';   function App() { +  const [token, setToken] = useState() +  const [loading, setLoading] = useState() +  const [formUsername, setFormUsername] = useState() +  const [formPassword, setFormPassword] = useState()    const [ firstName, setFirstName] = useState('')    const [ lastName, setLastName] = useState('')    const [ username, setUsername] = useState('') @@ -10,7 +14,16 @@    const [ error, setError] = useState()     useEffect(() => { -    fetch('\/api\/user') +    if (token) { +    fetch( +        '\/api\/user', +        { +        headers: { +          'Content-Type': 'application\/json;charset=utf-8', +          'Authorization': `Token ${token}`, +        }, +      } +    )        .then(response => {          if (response.ok) {            return response.json() @@ -24,24 +37,69 @@          setUsername(data.username)          setEmail(data.email)          setDateJoined(data.date_joined) +        setError(null) +      }) +      .catch(error => { +        console.log(error) +        setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438') +      }) +    } +  }, [token]) + +  const submitHandler = e => { +    e.preventDefault(); +    setLoading(true); +    fetch( +      '\/api\/login', +      { +        method: 'POST', +        headers: { +          'Content-Type': 'application\/json;charset=utf-8', +        }, +        body: JSON.stringify({ +          username: formUsername, +          password: formPassword, +        }) +      } +    ) +      .then(response => { +        if (response.ok) { +          return response.json() +        } else { +          throw Error(`Something went wrong: code ${response.status}`) +        } +      }) +      .then(({key}) => { +        setToken(key) +        setError(null)        })        .catch(error => {          console.log(error)          setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438')        }) -  }, []) +      .finally(setLoading(false)) +    }     return (      &lt;div className=\"App\"> -      {error? -        &lt;p>{error}&lt;\/p> +      {error? &lt;p>{error}&lt;\/p> : null} +      {!token? +        loading? \"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...\" : +        &lt;form className=\"loginForm\" onSubmit={submitHandler}> +          &lt;input type=\"text\" name=\"username\" value={formUsername} onChange={e => setFormUsername(e.target.value)} placeholder=\"Username\"\/> +          &lt;input type=\"password\" name=\"password\" value={formPassword} onChange={e => setFormPassword(e.target.value)} placeholder=\"Password\"\/> +          &lt;input type=\"submit\" name=\"submit\" value=\"\u0412\u043e\u0439\u0442\u0438\"\/> +        &lt;\/form>        : +        !error?          &lt;div className=\"Profile\">            &lt;h1>{firstName} {lastName}&lt;\/h1>            &lt;h2>{username}&lt;\/h2>            &lt;p>email: {email}&lt;\/p>            &lt;p>\u041f\u0440\u043e\u0444\u0438\u043b\u044c \u0441\u043e\u0437\u0434\u0430\u043d {dateJoined}&lt;\/p>          &lt;\/div> +        : +        null        }      &lt;\/div>    );<\/code><\/pre>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/uh\/i3\/gj\/uhi3gjko8yn7ee0pi-x1oxalrqe.png\" alt=\"login-page\" data-src=\"https:\/\/habrastorage.org\/webt\/uh\/i3\/gj\/uhi3gjko8yn7ee0pi-x1oxalrqe.png\"\/><\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0442\u043e\u043a\u0435\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>token<\/code>. \u0422\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u0436\u0435 \u0445\u0443\u0436\u0435, \u0447\u0435\u043c \u0432 Basic, \u0432\u0435\u0434\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u043e\u043a\u0435\u043d \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0438 \u043d\u0430\u0434\u043e \u0432\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043d\u043e\u0441\u0438\u0442\u044c \u0432 localstorage \u0442\u043e\u0436\u0435 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434. \u0422\u0430\u043a \u043c\u044b \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u043c \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e, \u043d\u043e \u0436\u0435\u0440\u0442\u0432\u0443\u0435\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c\u044e. \u0414\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043a \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0432 localstorage.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0441\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d, \u0441\u0445\u0435\u043c\u0430 \u0441 \u0442\u043e\u043a\u0435\u043d\u043e\u043c \u0432\u0435\u0441\u044c\u043c\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0438 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0447\u0435\u043c\u0443? \u0420\u0430\u043d\u0435\u0435 \u043c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0438\u0445 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0432\u0437\u043b\u043e\u043c\u0430\u0442\u044c. \u041d\u043e \u0434\u0435\u043b\u043e, \u0441\u043a\u043e\u0440\u0435\u0435, \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0432 \u044d\u0442\u043e\u043c \u2014 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 cookies!<\/p>\n<p>  <\/p>\n<h2 id=\"session\">Session<\/h2>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u043c\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a \u0441\u0430\u043c\u043e\u0439 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u0437\u0430 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0438\u0435 \u0434\u0435\u0441\u044f\u0442\u0438\u043b\u0435\u0442\u0438\u044f \u0441\u0445\u0435\u043c\u0435. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u043f\u0430\u0440\u043e\u043b\u044f, \u0442\u043e\u043a\u0435\u043d \u0441\u0435\u0441\u0441\u0438\u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0443\u043a\u0430\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0448\u043b\u0435\u0442 \u0438\u0445 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0445\u0435\u043c\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"davayte-peredelaem-prilozhenie-chtoby-zadeystvovat-etu-shemu\">\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0441\u0445\u0435\u043c\u0443.<\/h3>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043c\u0435\u043d\u044f\u0435\u043c <code>TokenAuthentication<\/code> \u043d\u0430 <code>SessionAuthentication<\/code> \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-from rest_framework.authentication import TokenAuthentication +from rest_framework.authentication import SessionAuthentication<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-@authentication_classes([TokenAuthentication]) +@authentication_classes([SessionAuthentication])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 <code>http:\/\/localhost:8000\/api\/user<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">HTTP 403 Forbidden Allow: GET, OPTIONS Content-Type: application\/json Vary: Accept  {     \"detail\": \"Authentication credentials were not provided.\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u0434 \u043e\u0442\u0432\u0435\u0442\u0430 403, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430 HTTP, \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0435\u043d\u044b \u043d\u0430 \u0441\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>Django \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0441\u0435\u0441\u0441\u0438\u0439. \u0422.\u0435. \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u0430\u0439\u0442 \u043d\u0430\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u044b, \u0442\u0430\u043a\u0430\u044f \u0436\u0435 \u043a\u0430\u043a \u0434\u043b\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0438 \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 cookie. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0440\u0435\u0434\u0438 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0441\u0434\u0435\u043b\u0430\u043b \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438 \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0435\u0433\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0443.<br \/>  \u0427\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043e\u043d \u0432\u0432\u0435\u0434\u0435\u0442 \u0441\u0432\u043e\u0438 \u043b\u043e\u0433\u0438\u043d\/\u043f\u0430\u0440\u043e\u043b\u044c? \u041c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0432\u044f\u0436\u0435\u043c \u043d\u043e\u043c\u0435\u0440 \u0435\u0433\u043e \u0441\u0435\u0441\u0441\u0438\u0438 \u0438 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0421\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0439 \u044d\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443: \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0444\u0430\u0439\u043b\u0430\u0445, \u0432 cookies (\u043a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445).<br \/>  \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0442 \u043a\u0430\u043a\u043e\u0433\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0438 \u043a \u043a\u0430\u043a\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f.<br \/>  \u0418\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a \u044d\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <a href=\"https:\/\/docs.djangoproject.com\/en\/3.2\/ref\/settings\/#std:setting-SESSION_COOKIE_HTTPONLY\" rel=\"nofollow noopener noreferrer\">SESSION_COOKIE_HTTPONLY<\/a> \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSRF-\u0442\u043e\u043a\u0435\u043d\u044b \u0438, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u0434\u0435\u043b\u0430\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0430 \u043d\u0435 \u043f\u043e \u0432\u0440\u0435\u0434\u043e\u043d\u043e\u0441\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <code>server\/core\/serializers.py<\/code> \u0443\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0439 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 <code>TokenSeriazliser<\/code>, \u0430 <code>IssueTokenRequestSerializer<\/code> \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0432 <code>LoginRequestSerializer<\/code>. \u0424\u0443\u043d\u043a\u0446\u0438\u044e <code>issue_token<\/code> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>server\/core\/views.py<\/code> \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0451 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>login<\/code> \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@api_view(['POST']) @permission_classes([AllowAny]) def login(request: Request):     serializer = LoginRequestSerializer(data=request.data)     if serializer.is_valid():         authenticated_user = authenticate(**serializer.validated_data)         if authenticated_user is not None:             login(request, authenticated_user)             return Response({'status': 'Success'})         else:             return Response({'error': 'Invalid credentials'}, status=403)     else:         return Response(serializer.errors, status=400)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-from rest_framework.authentication import TokenAuthentication +from rest_framework.authentication import SessionAuthentication -from core.serializers import UserSerializer, IssueTokenRequestSerializer, TokenSeriazliser +from core.serializers import UserSerializer, LoginRequestSerializer -from rest_framework.authtoken.models import Token -from django.contrib.auth import authenticate +from django.contrib.auth import authenticate, login<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0438 \u043f\u0440\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 <code>server\/server\/urls.py<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> urlpatterns = [      path('admin\/', admin.site.urls),      path('api\/user', views.user, name='user'), -    path('api\/login', views.issue_token, name='issue_token'), +    path('api\/login', views.login, name='login'),  ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 <code>client\/src\/App.js<\/code> \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u043b\u0430\u0433\u043e\u043c <code>isLoggedIn<\/code>, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0438\u0437 <code>document.cookie<\/code> \u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0442 CSRF-\u0430\u0442\u0430\u043a \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u043d\u0430 \u043b\u043e\u0433\u0438\u043d \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 <code>X-CSRFToken<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@@ -1,8 +1,16 @@  import { useState, useEffect } from 'react';  import '.\/App.css';  + +function getCookie(name) { +  const value = `; ${document.cookie}`; +  const parts = value.split(`; ${name}=`); +  if (parts.length === 2) return parts.pop().split(';').shift(); +} + +  function App() { -  const [token, setToken] = useState() +  const [isLoggedIn, setIsLoggedIn] = useState(true)    const [loading, setLoading] = useState()    const [formUsername, setFormUsername] = useState()    const [formPassword, setFormPassword] = useState() @@ -12,15 +20,15 @@    const [ email, setEmail] = useState('')    const [ dateJoined, setDateJoined] = useState('')    const [ error, setError] = useState() +  const csrftoken = getCookie('csrftoken')     useEffect(() => { -    if (token) { +    if (isLoggedIn) {      fetch(          '\/api\/user',          {          headers: {            'Content-Type': 'application\/json;charset=utf-8', -          'Authorization': `Token ${token}`,          },        }      ) @@ -42,9 +50,10 @@        .catch(error => {          console.log(error)          setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438') +        setIsLoggedIn(false)        })      } -  }, [token]) +  }, [isLoggedIn])     const submitHandler = e => {      e.preventDefault(); @@ -55,6 +64,7 @@          method: 'POST',          headers: {            'Content-Type': 'application\/json;charset=utf-8', +          'X-CSRFToken': csrftoken,          },          body: JSON.stringify({            username: formUsername, @@ -70,7 +80,7 @@          }        })        .then(({key}) => { -        setToken(key) +        setIsLoggedIn(true)          setError(null)        })        .catch(error => { @@ -83,7 +93,7 @@    return (      &lt;div className=\"App\">        {error? &lt;p>{error}&lt;\/p> : null} -      {!token? +      {!isLoggedIn?          loading? \"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...\" :          &lt;form className=\"loginForm\" onSubmit={submitHandler}>            &lt;input type=\"text\" name=\"username\" value={formUsername} onChange={e => setFormUsername(e.target.value)} placeholder=\"Username\"\/><\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u0434\u0435\u0436\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 \u043b\u0438\u0446\u043e. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u0442 \u043f\u0440\u0435\u0434\u0435\u043b\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0442\u0430\u043a \u0441\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"jwt\">JWT<\/h2>\n<p>  <\/p>\n<p>\u0410 \u0437\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0441\u043b\u043e\u0432\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u2014 \u0432\u0435\u0431-\u0442\u043e\u043a\u0435\u043d\u044b, \u043e\u043d\u0438 \u0431\u044b\u0432\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435, \u043d\u043e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <a href=\"https:\/\/jwt.io\/introduction\" rel=\"nofollow noopener noreferrer\">JSON Web Token<\/a>. \u0421\u0435\u0440\u0432\u0435\u0440\u0443 \u0443\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0434\u0442\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c, \u043a\u0430\u043a\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u043e\u043a\u0435\u043d, \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0448\u0438\u0442\u0430 \u0432 \u043d\u0435\u043c \u0441\u0430\u043c\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0430\u0439\u0432\u0435\u0440\u0430\u043c\u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0441\u0442\u0430\u043b\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0432\u0435\u0434\u044c \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0441\u0441\u0438\u0439 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u0443\u044e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u043a \u043d\u0435\u0439. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0441\u0442\u0430\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0433\u043b\u043e\u043c\u0435\u0440\u0430\u0442\u044b \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0436\u0438\u0432\u0443\u0449\u0438\u0445 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u043e\u043c\u0435\u043d\u0430\u0445, \u043d\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0435\u0434\u0438\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0432\u0445\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 JWT \u0438 \u043a\u0430\u043a \u043e\u043d \u0437\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0441 \u0441\u0435\u0431\u0435 \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e? \u042d\u0442\u043e \u0442\u0440\u0438 \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 \u0442\u043e\u0447\u043a\u0443: \u0432 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0432 base64 \u043a\u043e\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u0432\u0430 JSON-\u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u2014 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435; \u0442\u0440\u0435\u0442\u044c\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0435\u0440\u0432\u044b\u0445 \u0434\u0432\u0443\u0445 \u0438 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u2014 \u044d\u0442\u043e \u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u044c. \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c \u0442\u043e\u043a\u0435\u043d \u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432 \u0442\u043e\u043a\u0435\u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u043d\u0430 \u0437\u043d\u0430\u0435\u0442 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u0430 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u043e\u043d\u0430 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u0430\u043c\u0430\u044f \u043b\u0443\u0447\u0448\u0430\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u044f \u2014 \u043f\u0430\u0441\u043f\u043e\u0440\u0442. \u041f\u0430\u0441\u043f\u043e\u0440\u0442 \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0433\u043e\u0441\u0443\u0434\u0430\u0440\u0441\u0442\u0432\u043e\u043c, \u043a\u0430\u043a \u0434\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0432\u0435\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0438 \u0441 \u043a\u0430\u043a\u0438\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0430\u0441 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u043e \u043d\u0435\u043c\u0443. \u0415\u0433\u043e \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u043b\u0430\u0442\u044c, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u0443\u0434\u0430\u0447\u0438 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u043e. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044f\u043d \u0438\u043b\u0438 \u0435\u0433\u043e \u043f\u043e\u0445\u0438\u0442\u044f\u0442? \u041d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u0443\u0436 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043a\u0430\u0436\u0434\u043e\u0435 \u043d\u043e\u0432\u0448\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0441\u0438\u043b\u0438\u0432\u0430\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0443\u0449\u0435\u0440\u0431\u0430 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 payload \u0432\u0440\u0435\u043c\u044f, \u0434\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u0435\u043d. \u0422\u043e\u0433\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u0442\u043e\u043a\u0435\u043d\u043e\u043c \u0441 \u0438\u0441\u0442\u0435\u043a\u0448\u0438\u043c \u0441\u0440\u043e\u043a\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f. \u0427\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0440\u0435\u0448\u0430\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u044b. \u041d\u043e \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c? \u041d\u0435\u0443\u0436\u0435\u043b\u0438 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0444\u043e\u0440\u043c\u0435 \u0441 \u043b\u043e\u0433\u0438\u043d\u043e\u043c \u043f\u0430\u0440\u043e\u043b\u0435\u043c? \u041d\u0435\u0442, \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0442\u043e\u043a\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, <a href=\"https:\/\/habr.com\/ru\/company\/Voximplant\/blog\/323160\/\">\u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439<\/a>. \u041f\u0435\u0440\u0432\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f access token, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 refresh token<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043a\u0443\u0434\u0430 \u0438\u0445 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c? \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, access \u0436\u0438\u0432\u0435\u0442 10 \u043c\u0438\u043d\u0443\u0442, \u0435\u0433\u043e \u043d\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e \u0437\u0430\u043d\u0435\u0441\u0442\u0438 \u0432 localstorage. \u0421 refresh \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0432\u0435\u0434\u044c \u0435\u0441\u043b\u0438 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c \u0442\u0430\u043a\u0436\u0435, \u0443 \u043d\u0430\u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0435. \u042f \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0441\u0430\u043c \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0441\u044f \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 localstorage, \u043d\u043e \u043e\u043d\u043e \u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442, \u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u043b\u0441\u044f \u044d\u0442\u043e\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u043e\u0431\u0437\u043e\u0440.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a \u044f \u0443\u0437\u043d\u0430\u043b, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0430\u044f \u043d\u0438\u0436\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u0441 \u043b\u043e\u0433\u0438\u043d\u043e\u043c \u0438 \u043f\u0430\u0440\u043e\u043b\u0435\u043c, \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u0430\u0440\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432: access \u0438 refresh. \u0418\u0445 \u043c\u044b \u0437\u0430\u043d\u043e\u0441\u0438\u043c \u0432 localstorage, \u043f\u043e\u0447\u0435\u043c\u0443 \u2014 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435. access \u043c\u044b \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a \u0431\u044d\u043a\u0435\u043d\u0434\u0443 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 <code>Authorization: Bearer ${access_token}<\/code>. \u0421\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u044c \u0438 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0438 \u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043d\u0438 \u043a \u043a\u0430\u043a\u0438\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430\u043c. \u041a\u043e\u0433\u0434\u0430 \u0443 access \u0438\u0441\u0442\u0435\u043a\u0430\u0435\u0442 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043b\u0438\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 <code>api\/refresh<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u0440\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0440\u044b\u0439 refresh \u0437\u0430\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u0447\u0435\u0440\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d. \u041e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0432\u043d\u0435\u0448\u043d\u0435\u043c\u0443 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0443 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043d\u0430\u0434\u043e, \u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"realizuem-dannyy-podohod-v-nashem-prilozhenii\">\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u043e\u0445\u043e\u0434 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/h3>\n<p>  <\/p>\n<p>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0432 <code>django-rest-framework<\/code> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 JWT \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0451.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">pip install djangorestframework-simplejwt<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c \u0432\u0435\u0440\u0441\u0438\u044f 4.8.0. \u0417\u0430\u0442\u0435\u043c, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438, \u043c\u0435\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b <code>server\/core\/views.py<\/code>. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-from rest_framework.authentication import SessionAuthentication +from rest_framework_simplejwt.authentication import JWTAuthentication<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">-@authentication_classes([SessionAuthentication]) +@authentication_classes([JWTAuthentication])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c <code>http:\/\/localhost:8000\/api\/user<\/code>, \u043f\u043e\u0439\u043c\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 401:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">HTTP 401 Unauthorized Allow: OPTIONS, GET Content-Type: application\/json Vary: Accept WWW-Authenticate: Bearer realm=\"api\"  {     \"detail\": \"Authentication credentials were not provided.\" }<\/code><\/pre>\n<p>  <\/p>\n<p><code>Bearer<\/code> \u2014 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0442\u0443\u0442 \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043a\u0435\u043d \u043d\u0430 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u0438\u0442\u0435\u043b\u044f. \u0412 \u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 <code>server\/core\/views.py<\/code> \u043c\u043e\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <code>login<\/code> \u0441\u043e\u0432\u0441\u0435\u043c, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432, \u043e\u0441\u0442\u0430\u0432\u0438\u0432 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0432\u044b\u0434\u0430\u044e\u0449\u0438\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412 <code>server\/server\/urls.py<\/code> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u043f\u0443\u0442\u0438: <code>\/api\/token\/obtain<\/code> \u0438 <code>\/api\/token\/refresh<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0443\u0436\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 <code>django-rest-framework-simplejwt<\/code> \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\"> from core import views +from rest_framework_simplejwt.views import ( +    TokenObtainPairView, +    TokenRefreshView, +)   urlpatterns = [      path('admin\/', admin.site.urls),      path('api\/user', views.user, name='user'), -    path('api\/login', views.login, name='login'), +    path('api\/token\/obtain', TokenObtainPairView.as_view(), name='token_obtain'), +    path('api\/token\/refresh', TokenRefreshView.as_view(), name='token_refresh'),  ]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0437\u0430\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u0447\u0435\u0440\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0438\u0448\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b <code>server\/server\/settings.py<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 <code>INSTALLED_APPS<\/code> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>rest_framework_simplejwt.token_blacklist<\/code>. \u0412 \u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c True: <a href=\"https:\/\/django-rest-framework-simplejwt.readthedocs.io\/en\/latest\/settings.html#rotate-refresh-tokens\" rel=\"nofollow noopener noreferrer\">ROTATE_REFRESH_TOKENS<\/a> \u0438 <a href=\"https:\/\/django-rest-framework-simplejwt.readthedocs.io\/en\/latest\/settings.html#blacklist-after-rotation\" rel=\"nofollow noopener noreferrer\">BLACKLIST_AFTER_ROTATION<\/a>. \u041f\u0435\u0440\u0432\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 access \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0438 refresh, \u0430 \u0432\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0435\u0441\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 refresh \u0432 \u0447\u0435\u0440\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0438\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u0421\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>ACCESS_TOKEN_LIFETIME<\/code> \u0438 <code>REFRESH_TOKEN_LIFETIME<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0443, \u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442 <code>client\/src\/App.js<\/code>, \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0443\u0447\u0435\u0441\u0442\u044c, \u043c\u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043a\u0430\u043a-\u0442\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">@@ -10,7 +10,9 @@   function App() { -  const [isLoggedIn, setIsLoggedIn] = useState(true) +  const [access, setAccess] = useState(localStorage.getItem('accessToken')) +  const [refresh, setRefresh] = useState(localStorage.getItem('refreshToken')) +  const [refreshRequired, setRefreshRequired] = useState(false)    const [loading, setLoading] = useState()    const [formUsername, setFormUsername] = useState()    const [formPassword, setFormPassword] = useState() @@ -20,15 +22,15 @@    const [ email, setEmail] = useState('')    const [ dateJoined, setDateJoined] = useState('')    const [ error, setError] = useState() -  const csrftoken = getCookie('csrftoken')     useEffect(() => { -    if (isLoggedIn) { +    if (access) {      fetch(          '\/api\/user',          {          headers: {            'Content-Type': 'application\/json;charset=utf-8', +          'Authorization': `Bearer ${access}`,          },        }      ) @@ -36,6 +38,9 @@          if (response.ok) {            return response.json()          } else { +          if (response.status === 401) { +            throw Error('refresh') +          }            throw Error(`Something went wrong: code ${response.status}`)          }        }) @@ -48,23 +53,59 @@          setError(null)        })        .catch(error => { -        console.log(error) -        setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438') -        setIsLoggedIn(false) +        if (error.message === 'refresh') { +          setRefreshRequired(true) +        } else { +          console.log(error) +          setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438') +        }        })      } -  }, [isLoggedIn]) +  }, [access]) + + +  useEffect(() => { +    if (refreshRequired) { +    fetch( +        '\/api\/token\/refresh', +        { +        method: 'POST', +        headers: { +          'Content-Type': 'application\/json;charset=utf-8', +        }, +        body: JSON.stringify({ refresh }) +      } +    ) +      .then(response => { +        if (response.ok) { +          return response.json() +        } else { +          throw Error(`Something went wrong: code ${response.status}`) +        } +      }) +      .then(({access, refresh}) => { +        localStorage.setItem('accessToken', access) +        setAccess(access) +        localStorage.setItem('refreshToken', refresh) +        setRefresh(refresh) +        setError(null) +      }) +      .catch(error => { +        console.log(error) +        setError('\u041e\u0448\u0438\u0431\u043a\u0430, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438') +      }) +    } +  }, [refreshRequired])     const submitHandler = e => {      e.preventDefault();      setLoading(true);      fetch( -      '\/api\/login', +      '\/api\/token\/obtain',        {          method: 'POST',          headers: {            'Content-Type': 'application\/json;charset=utf-8', -          'X-CSRFToken': csrftoken,          },          body: JSON.stringify({            username: formUsername, @@ -79,8 +120,11 @@            throw Error(`Something went wrong: code ${response.status}`)          }        }) -      .then(({key}) => { -        setIsLoggedIn(true) +      .then(({access, refresh}) => { +        localStorage.setItem('accessToken', access) +        setAccess(access) +        localStorage.setItem('refreshToken', refresh) +        setRefresh(refresh)          setError(null)        })        .catch(error => { @@ -93,7 +137,7 @@    return (      &lt;div className=\"App\">        {error? &lt;p>{error}&lt;\/p> : null} -      {!isLoggedIn? +      {!access?          loading? \"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...\" :          &lt;form className=\"loginForm\" onSubmit={submitHandler}>            &lt;input type=\"text\" name=\"username\" value={formUsername} onChange={e => setFormUsername(e.target.value)} placeholder=\"Username\"\/><\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"vazhnye-vyvody\">\u0412\u0430\u0436\u043d\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u043c\u043d\u0435 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u0441\u0435\u0441\u0441\u0438\u044f\u0445 \u0432 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a\u0430\u0445 \u043d\u0430 react \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435. \u0410 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u043a\u0435\u043d\u0430\u043c\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 overkill, \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u0440\u043e\u043c\u0435 \u0431\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438. \u042f \u0441\u0432\u043e\u0438 \u0432\u044b\u0432\u043e\u0434\u044b \u0441\u0434\u0435\u043b\u0430\u043b \u0438 \u043f\u043e\u0439\u0434\u0443 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u0443\u0441\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u044b\u0432\u043e\u0434\u0443 \u043f\u0440\u0435\u0434\u0448\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u0432 \u0434\u0435\u0434\u043b\u0430\u0439\u043d\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"poleznye-ssylki\">\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>[0] <a href=\"https:\/\/habr.com\/ru\/company\/dataart\/blog\/262817\/\">\u041e\u0431\u0437\u043e\u0440 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u0432 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445<\/a><br \/>  [1] <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc7235\" rel=\"nofollow noopener noreferrer\">RFC7235: Hypertext Transfer Protocol (HTTP\/1.1): Authentication<\/a><br \/>  [2] <a href=\"https:\/\/datatracker.ietf.org\/doc\/html\/rfc2617\" rel=\"nofollow noopener noreferrer\">RFC2617: HTTP Authentication: Basic and Digest Access Authentication<\/a><br \/>  [3] <a href=\"https:\/\/www.rfc-editor.org\/rfc\/rfc7617.html#section-4\" rel=\"nofollow noopener noreferrer\">RFC7617: The &#8216;Basic&#8217; HTTP Authentication Scheme<\/a><br \/>  [4] <a href=\"https:\/\/www.rfc-editor.org\/rfc\/rfc6750.html\" rel=\"nofollow noopener noreferrer\">The OAuth 2.0 Authorization Framework: Bearer Token Usage<\/a><br \/>  [5] <a href=\"https:\/\/jwt.io\/introduction\" rel=\"nofollow noopener noreferrer\">Introduction to JSON Web Tokens<\/a><br \/>  [6] <a href=\"https:\/\/habr.com\/ru\/post\/340146\/\">\u041f\u044f\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0448\u0430\u0433\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f JSON Web Tokens (JWT)<\/a><br \/>  [7] <a href=\"https:\/\/habr.com\/ru\/post\/502702\/\">\u041e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 JWT \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/a><br \/>  [8] <a href=\"https:\/\/gist.github.com\/zmts\/802dc9c3510d79fd40f9dc38a12bccfc\" rel=\"nofollow noopener noreferrer\">\u041f\u0440\u043e \u0442\u043e\u043a\u0435\u043d\u044b, JSON Web Tokens (JWT), \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e. Token-Based Authentication<\/a><br \/>  [9] <a href=\"https:\/\/habr.com\/ru\/company\/Voximplant\/blog\/323160\/\">\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d Refresh Token, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c Access Token?<\/a><br \/>  [10] <a href=\"https:\/\/habr.com\/ru\/post\/466929\/\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c Refresh Token<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/512746\/\"> https:\/\/habr.com\/ru\/articles\/512746\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 <a href=\"https:\/\/habr.com\/ru\/post\/512526\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u044f \u043f\u0438\u0441\u0430\u043b \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0431\u0435\u0437\u0434\u0443\u043c\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0442\u0430\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043d\u0430 JWT. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0443\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e, \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0432 React \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0443, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0432\u043e\u0438 \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0435 \u0432 \u0441\u0435\u0431\u044f \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u0438\u043b\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 Django \u0441\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043b\u043e\u0433\u0438\u043d\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u043e \u0447\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435? \u041e\u0431\u0437\u043e\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0439 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u0441\u0445\u0435\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/on\/73\/qf\/on73qftexoofpohdh0rg3pr0gya.jpeg\" alt=\"main\" data-src=\"https:\/\/habrastorage.org\/webt\/on\/73\/qf\/on73qftexoofpohdh0rg3pr0gya.jpeg\" data-blurred=\"true\"\/><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-416712","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/416712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=416712"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/416712\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=416712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=416712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=416712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}