小编Ezr*_*ab_的帖子

我正在使用 Laravel sainttum （以前的 Airlock）并且有一个问题。我在文档中读到：

要验证您的 SPA，您的 SPA 登录页面应首先向 /sanctum/csrf-cookie 路由发出请求，以初始化应用程序的 CSRF 保护：

axios.get('/sanctum/csrf-cookie').then(response => {
// Login... }); 

CSRF 保护初始化后，您应该向典型的 Laravel /login 路由发出 POST 请求。此 /login 路由可能由 laravel/ui 身份验证脚手架包提供。

这是否意味着对于我发出的每个请求，我应该首先检查 cookie 是否已经设置？因为假设我有一个注册的用户。在发出 POST 请求来注册用户之前，我应该首先发出 GET 请求以从后端获取 CSRF-Cookie，然后发出 POST 请求来注册用户。

现在，用户被重定向到登录网页并被要求登录。那么前端是否首先必须检查是否有 CSRF-Cookie，如果没有，是否应该首先再次发出 GET 请求来获取 cookie？

最后一点也让我感到困惑，因为在调用注册方法时，用户实际上并未登录，因此用户必须重定向到登录页面，以使用用户刚刚填写的注册凭据进行登录，这对我来说似乎是这样就像糟糕的用户体验一样，对吧？

将函数用作组件时，您可以使用useMediaQuerymaterial-ui 中的钩子。然而，它没有告诉你如何在类中使用这个钩子。

所以我做了一些研究，发现你可以通过这样做在课堂上使用它：

import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';

const withMediaQuery = (...args) => Component => props => {
  const mediaQuery = useMediaQuery(...args);
  return <Component mediaQuery={mediaQuery} {...props} />;
};

export default withMediaQuery;

但是，当像这样将它添加到类时：

export default withStyles(styles)(withMediaQuery(Main));

它给了我这个错误：

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

我真的需要使用媒体查询，因为有些变量依赖于它们。这是我想使用媒体查询的类的渲染方法。

render() { …

我从父组件发送一个道具：user。现在，在子组件中，我想复制它而不改变 prop 的值。

我尝试这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

但是，如果我更改用户对象的值，它也会更改 apiUser 属性。我想也许使用Object.assign会起作用，但随后裁判不再有反应。

在 Vue 2.0 中我会这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

感谢 @buttons 的评论，得出了答案。

const user = reactive({ ...props.apiUser });

根据文档：

此外，当 MySQL 容器启动时，它将确保存在名称与 DB_DATABASE 环境变量的值匹配的数据库。

我的.env文件看起来像这样。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=

然而，当我尝试通过 运行迁移时sail artisan migrate，我得到了这个错误： SQLSTATE[HY000] [1049] Unknown database 'test' (SQL: select * from information_schema.tables where table_schema = test and table_name = migrations and table_type = 'BASE TABLE')

我试过的：

• 一起删除 docker 容器和图像。
• 运行sail build --no-cache（尝试完全重建一切）
• 运行时sail shell，我进入 MySQL 并显示所有数据库。我可以在那里看到默认的 Laravel 数据库。

你怎么告诉sail创建正确的DB_DATABASE？

我的docker-compose.yml：

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.0
            dockerfile: …

我试图在我的反应应用程序中使用转换，但每次我尝试使用任何转换模块时都会出现此错误：“TypeError：无法读取未定义的属性‘样式’”，

（匿名函数）node_modules/@material-ui/core/esm/Fade/Fade.js:83

  80 |     style: _extends({
  81 |       opacity: 0,
  82 |       visibility: state === 'exited' && !inProp ? 'hidden' : undefined
> 83 |     }, styles[state], style, children.props.style),
     | ^  84 |     ref: handleRef
  85 |   }, childProps));
  86 | });

我尝试过不使用 es6 类样式方法，这实际上解决了问题，但我想使用 es6 类。

我认为这与我在顶部定义的样式变量有关，如下所示：

const styles = theme => ({
    typography: {
        marginTop: theme.spacing(2)
    }
});

class IndexPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false,
        }
    }

    render() {
        const {classes} = …

我需要将中间的网格项保持为空。我认为使用以下属性是可能的：grid-template-areas

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

但不幸的是，这并没有给出正确的显示。

所以我使用了 5 个名为 item-a 到 item-e 的类，然后在 css 中设置了网格中的正确位置。然而，这感觉不是一种非常有效的方法。有谁知道如何使它更有效？

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

.content-container {
    width: 51.5em;
    height: 30em;
    padding: 2.125em 1.5em;
    display: grid;
    grid-template-columns: 45% auto 45%;
    grid-template-rows: auto;
  }

  .item-a {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .item-b {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .item-c {
    grid-column: 1;
    grid-row: 2 / 3;
  }

  .item-d {
    grid-column: …

当涉及到着色元素时，我在 Material-UI 中的主题方面遇到了一些困难。某些元素会自动选择“theme.palette.main.dark”。我想知道如何强迫他们不要这样做。

例如 TextField 和 SpeedDial 组件会自动从主题中选择 dark 属性。我试图只删除 dark 属性，但 TextField 是黑色的，并且 TextField 内的文本不可读。

我的主题文件配置如下：

import {createMuiTheme} from "@material-ui/core";
import {green, indigo, red} from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: indigo.A200,
      dark: green.A100
    },
    white: {
      text: '#fff',
    },
    secondary: {
      main: red.A100,
      dark: green.A100,
    }
  }
});

export default theme;

我希望 TextField 和 SpeedDial 选择原色，但实际结果是他们选择了 dark 属性，可能是因为否则会干扰人们无法正确看到组件，但我想自定义选择颜色。我一直无法找到有关如何更改 TextField 组件中下划线和浮动的颜色的解释。

https://codesandbox.io/s/material-demo-o52c8

我试图截断一个表，但每次我尝试通过测试运行它时，我都会收到 PDOException： There is no active transaction

我正在使用这个RefreshDatabase特性。

我的代码如下所示：

Model::query()->truncate();

如何从 Sanctum 令牌中检索“登录”用户。

对于登录，我有以下方法

public function login(Request $request)
{
    if (Auth::attempt($request->toArray())) {

        /* @var User $user */
        $user = $request->user();

        $token = $user->createToken('web-token')->plainTextToken;

        return response()->json([
            'user' => $user,
            'token' => $token,
        ], Response::HTTP_OK);
    }
}

现在注销我使用自定义方法。

public function logout(Request $request)
{
    dd($request->user()); // <- Always returns null
}

我想撤销令牌，但我不知道如何检索当前登录的用户。显然，为了注销，我发送了带有 Bearer 和 plainTextToken 作为值的 Authorization 标头。

我想知道检查用户是否仍然登录客户端的最佳实践是什么。

假设用户登录。如果成功，它将被保存在状态中，如下所示：

axios.post('/login').then(() => {
  this.state.loggedInUser = true
});

现在，如果用户刷新浏览器，状态就会丢失，但 和laravel_session仍然XSRF-TOKEN可用且有效。

在每次页面重新加载时添加中间件以发出检索当前登录用户信息的请求是否有意义？像这样的东西？：

const authMiddleware = () => {
  axios.get('/user').catch(() => console.error('user is not logged in!'));
};

编辑

请注意，我在 SPA 模式下使用 Sanctum。所以没有代币。