如何在 React 中访问 Django 会话答案

【问题标题】：How to access Django session in React如何在 React 中访问 Django 会话
【发布时间】：2020-04-18 19:32:43
【问题描述】：

如果我使用 Django REST 框架进行会话身份验证

https://www.django-rest-framework.org/api-guide/authentication/

和前端的 React，我想知道如何确定我的会话是否在 React 中的 Django 中处于活动状态？我假设会话是通过在客户端浏览器中设置一个 cookie 来实现的，因此每次从客户端发送请求时，它都会在标头中包含这个 cookie，Django 会自动从中读取。如果是这种情况，访问此 cookie 的最佳方式是什么？或者更确切地说，检查用户是否仍然直接通过身份验证的理想方法是什么？现在我可以向端点发送请求，如果我没有通过身份验证，它将抛出 403 错误，但在我看来，这不是在前端检查登录状态的优雅方式。

【问题讨论】：

Django 应用程序是否从不同的域提供给您的 react 应用程序？
@IainShelvington 同一个域，Django 实际上在我的根路径“/”中为反应应用程序提供服务。
你想在哪里检查在你的 react 应用中被认证的用户？处理 403 响应并引导用户再次进行身份验证有什么问题？
@IainShelvington 我检查 403 响应的唯一问题是它不够详细。我想不出任何，但我假设将来可能会出现 403 可能由于未经身份验证以外的原因返回的情况。此外，我认为在用户打开应用程序并且不再经过身份验证的情况下，如果他们经过身份验证，反应可以检查加载的后端，而不是等到用户手动发出请求。但我想这不是世界末日。
使用会话 cookie 之类的东西来确定用户是否登录时遇到的问题是 1）即使是匿名用户（未登录）也会获得会话 cookie 和 2）即使 cookie 是现在它可能不再有效

标签： django reactjs session django-rest-framework session-cookies

【解决方案1】：

# You can check in the constructor of your component whether the token is set or not. If not, redirect the page to login page. And remove the token in the logout component.

# For example

admin.js

import React, { Component } from 'react'
import { Link, Redirect } from 'react-router-dom';

export default class Admin extends Component {
    constructor(props) {
        super(props)
        const token = localStorage.getItem("token")

        let loggedIn = true

        if (token == null) {
            loggedIn = false
        }

        this.state = {
            loggedIn
        }
    }

    render() {
        if(this.state.loggedIn === false){
            return <Redirect to="/" />
        }
        return (
            <div>
                <h1>This is an Admin Page. Only Auth people can see this.</h1>
                <Link to="/logout">Logout</Link>
            </div>
        )
    }
}


logout.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom';

export default class Logout extends Component {
    constructor(props){
        super(props)
        localStorage.removeItem("token")
    }
    render() {
        return (
            <div>
                <h1>You have been logged out!!!</h1>
                <Link to="/">Login again</Link>
            </div>
        )
    }
}

【讨论】：

Cookie 位于存储/Cookie 部分。通过访问 localStorage 你可以访问 cookie 吗？