読者です 読者をやめる 読者になる 読者になる

oauth認証で突然動作不良が起きたら… Received HTTP status code [401] with message "<?xml version="1.0" encoding="UTF-8"?> <hash> <error>The given URL is considered malware</error> <request>/oauth/request_token</request> </hash> " when getting temporary credentials.

oauth認証が突然出来なくなった

f:id:monteecristoo:20170527095334j:plain

原因:

ドメインがSpamhausのブロックリストに登録されたため

確認方法:

oauth認証先のセッティング画面でcallbackURLを変えてみる 例えばtwitterでは…

f:id:monteecristoo:20170527095630j:plain

とアラートが出るのでシステムの問題ではなくドメインブロックの問題とわかる。

参考:

did2memo.net

 

*** cloud9の.c9users.io が登録されたためcloud9経由からtwitter oauth出来なくなった??? github googleは可 DBLから削除申請してもリリストされる

f:id:monteecristoo:20170527150519j:plain

Laravel5.4 + VueJS CSRF token error: TokenMismatchException in VerifyCsrfToken.php line 68:

middleware->('auth')を使用時form関連を扱うときtokenが必要

純粋なLaravel App なら

blade templateの

{{ csrf_token() }}

からtokenを取得して

<input type="hidden" name="_token" value="7YC0Sxth7AYe4RFSjzaPf2ygLCecJhblahblah">

をセット、または

<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

で解決できるがvueの場合や外部のパッケージを利用した場合、blade templateを使用しないでマニュアルでセットしなければいけない。例えばvue-core-image-uploadを導入した際、

var csrf_token = $('meta[name="csrf-token"]').attr('content'); // token の取得

<template>
  <vue-core-image-upload
    @imageuploaded = "imageuploaded"
    :max-file-size = "5242880"
    crop = "local"
    toCropImgY = "40px"
    :url = "url"
    :data = "token"
    inputOfFile = "image">
    <img :src="user.avatar" width="96" class="img-circle circle-border m-b-md" alt="profile">
  </vue-core-image-upload>
</template>

 

data() {
  return {
    token: {
      _token: csrf_token
    },

 

参考:

stackoverflow.com

stackoverflow.com

Laravel5.4 Laravel-Mix issue

Error: Module build failed: Error: Couldn't find preset "es2015" relative to directory

 

laravel-mixがes2015を認識していない

npm install babel-preset-es2015 --save-dev

プロジェクトのroot directoryに.babelrc

{
"presets": [
"es2015", { "modules": false},
]
}

を作る。

 

再度npm run dev (npm run watch中だとjsファイルを編集しない限りコンパイルされないので手動でnpm run devをし忘れないこと)

ブラウザのキャッシュ消去も忘れずに

参考:

github.com

ES6 spread syntaxが認識されない場合:

monteecristoo.hatenablog.com

Laravel + vue-router vue spaページのREST化

基本

app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。

Route::get('/profile', function() {
  return view('home');
});

→ home.blade.phpにvue componentのprofileがある場合、profileがレンダリングされた状態で開ける。

ただしcomponentがnestされている場合...

@app.js

const routes = [
  { path: '/profile', component: Profile,
    children: [
      {
        path: '/follow', component: Follows,   ・・・
      },
      {
        path: 'activity', component: Activity  ・・・
      }
    ]
  },

 

@web.php

Route::get('/follow', function() {   ・・・
  return view('home');
});

Route::get('/profile/activity', function() {  ・・・
  return view('home');
});

 

@親component

<router-link to="/follow">Following</router-link>   ・・・

<router-link to="/profile/activity">Activity</router-link>  ・・・

 

activityはprofileページからrouter-linkを通した場合開けるが、ページリロードの場合、component profile, activityともにレンダリングされない。

/profile/activityがrouter-viewに反映されない。

一方、child componentのfollowはpathを/followとし、root path化するとリロード経由でもレンダリングされる。

 

child componentをリロード経由で表示させたいならpathをrootにする(pathもnestさせない。純粋なVue SPAならこの制約外。)

Vue chips いろいろ

  • htmlタグ内では{{ }}は使わないで v-bindまたはコロンで下記のように記述

data() {

    return {

        img: "http://~~~~"

    }

}

<img :src='img'>

 

  • vuexでstateを設定した後、各componentでstateを呼び出したいとき

ページがレンダリングした時に同時に取得したいならcomputed

created()でstateの値を入れた場合、

data() {
    hoge : this.$store.state.~~~~

}

では値が取得できない。タイミングの問題???

computed: {

    hoge() {

        this.$store.state.~~~~

    }

}

* ここで 無駄にdataにhogeを作っておくとcomputedが反映されないので注意

イベント発動時にstateを取得したい場合、

sendMessage() {
  const message = {
    messageText: this.messageText,
    user: this.$store.state.user.user.name
  };

}

直接値をthis.$store.state.user.user.nameから参照できる

Laravel Database Seed

  • create a Seed file  

php artisan make:seeder UsersSeeder

  • register Seed file

@DatabaseSeeder.php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
public function run()
{
$this->call(UsersSeeder::class);
}
}

  • define UsersSeeder.php

use Illuminate\Database\Seeder;
use App\User;

class UsersSeeder extends Seeder
{

public function run()
{
$user = new User();
$user->name = "test";
$user->email = "test@test.com";
$user->password = bcrypt("testtest");
$user->save();
}
}

  • execute

php artisan db:seed