小编Jim*_*sel的帖子

我一直在关注有关 Vue + Laravel 身份验证的教程，一切都已设置完毕，但随后教程转到将令牌存储在本地存储中。我读到这不是应该遵循的最佳实践，因为它更容易受到 XSS 攻击。

问题是很难找到关于在 cookie 中存储令牌的教程（特别是 Laravel + Vue）。任何人都可以帮助如何实现在 cookie 中存储令牌吗？

非常感谢任何可以提供帮助的人。

这是我当前的代码。

控制器

public function login(Request $request) 
{
    $http = new\GuzzleHttp\Client;

    try {
        $response = $http->post(config('services.passport.login_endpoint'), [
            'form_params' => [
                'grant_type' => 'password',
                'client_id' => config('services.passport.client_id'),
                'client_secret' => config('services.passport.client_secret'),
                'username' => $request->username,
                'password' => $request->password,
            ]
        ]);
        return $response->getBody();
    } catch (\GuzzleHttp\Exception\BadResponseException $e) {
        if ($e->getCode() === 400) {
        return response()->json('Invalid Request. Please enter a username or a password.', $e->getCode());
    } else if ($e->getCode() === …

我只是想修复视图页面中的错误显示。它显示为 JSON 格式。我该如何解决？

Vue.组件

<template>
 <v-alert
  dense
  outlined
  type="error"
>
{{ allerror }}
</v-alert>
...
...
</template>

<script>
 data: () => ({
  allerror: ''
}),
       axios 
      .post('/api/section', { name, department_id })
      .then(response => {
        this.getSections()
        this.snackbar.appear = true
        this.snackbar.alert = response.data.alert
        this.snackbar.icon = response.data.icon
        this.$refs.form.reset()
      })
      .catch(error => this.allerror = error.response.data.errors)
</script>

我是 Vue 的新手，我想将 vuetify 中的零食栏/警报框重用于我的每个组件。我通过复制粘贴每个组件的代码来做到这一点，这使得它非常混乱且难以维护。

我如何为我的每个视图 vue 组件重用它？

请参阅下面的示例代码。

Vue组件<模板>

 <v-snackbar
  v-model="snackbar.appear"
  :color="snackbar.color"
  :timeout="snackbar.timeout"
  :left="snackbar.x === 'left'"
  :right="snackbar.x === 'right'"
  :top="snackbar.y === 'top'"
> 
  <v-row>
    <v-icon class="mx-2" size="18" dark>{{ snackbar.icon }}</v-icon>
    {{ snackbar.text }}
  </v-row>
  <v-btn dark text @click="snackbar.appear = false">OKAY</v-btn>
</v-snackbar>

Vue组件<脚本>

snackbar: {
    appear: false,
    icon: '',
    text: '',
    color: 'success',
    timeout: 2500,
    x: 'right',
    y: 'top',
  },

axios 
.post('/api/department-objective', { corporate_objective_id, objective, description })
.then(response => {
  this.snackbar.appear = true
  this.snackbar.text = response.data.text
  this.snackbar.icon = response.data.icon
}) …