2020.8.4の学習ノート

someone
4 8月, 2020
◆outlookの顔写真変更について
顔写真を変更しろとのオーダーだが、よくわからないので調べた。
右上➡プロフィール➡マイアカウント
で変更可能

Vue.js開発


  1. Middleware
  2. ログインのルーティング
  3. Vuexのmutation
  4. 機能のplugin化



◆middlewareのフック
[機能]
認証のルーティングの作成
エンドポイント/認証の振り分け
[モジュール]
Cookie:universal-cookie
[インストール]
npm install universal-cookie
[実装]
ルーティングに対応する3画面を作成する
①index
<template>
  <div>
    <h1>Index page</h1>
      <ul>
        <li>
          <nuxt-link to='/login'>ログインページへ</nuxt-link>
        </li>
        <li>
          <nuxt-link to='/auted-route'>認証が必要なページへ</nuxt-link>
        </li>
      </ul>
  </div>
</template>
②認証
<template>
  <div>
    <h1>認証が必要なページ</h1>
    <p>
        Cookieの'credential'値がTruthyの場合のみアクセス可能です<br>
        <nuxt-link to='/'>トップページへ戻る</nuxt-link>
    </p>
  </div>
</template>
③ログイン
<template>
  <div>
    <h1>ログインページ</h1>
    <p>
        <button type='button' @click="login">ログイン</button><br>
        <nuxt-link to='/'>トップページへ戻る</nuxt-link>
    </p>
  </div>
</template>

<script>
import Cookies from 'universal-cookie'

export default {
  methods: {
    login() {
        const cookies = new Cookies()
        cookies.set('Credential','true', {maxAge: 90})
        this.$router.push('/')
  }
}
</script>
ミドルウェアは一つの関数を返すものになる
nuxt.config.js
  router: {
    middleware: [
      'auth'
    ]
  },
middleware
import Cookies from 'universal-cookie'

export default ({ req, route, redirect }) => {
    if (process.browser) {
        console.log('route.path')
        if (['/'].includes(route.path)) {
            return
        }
        const cookies = req ? new Cookies(req.headers.cookie) : new Cookies()
        const credential = cookies.get('credential')

        if (credential && route.path === '/login') {
            return redirect('/')
        }
        if (credential && route.path !== '/login') {
            return redirect('/login')
        }
    }
}
◆プラグインの作成
  plugins: ['~/plugins/logger']
◆Vuexのオートローディング機能
①
export const state = () => ({
    isLoading: false
})

export const mutations = {
    setIsLoading(state, isLoading) {
        state.isLoading = isLoading
    }
}
②
export const state = () => ({
    List: []
})

export const mutations = {
    addUser(state, user) {
        state.list.push(user)
    }
}

export const actions = {
    addUser({ commit }, { user }) {
        commit('addUser', user)
    }
}
◆Firebaseのセットアップ
スクリプト
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/7.17.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/7.17.1/firebase-analytics.js"></script>
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

cli-install
$npm install -g firebase-tools

firebase-deployset
$firebase login
$firebase init


$firebase deploy
◆スキャフォールドの導入
npm install -g create-nuxt-app

◆作成
create-nuxt-app nuxt-blog-service
◆header作成

defaultvue
<template>
  <div>
    <TheHeader />
    <div class="wrapper">
      <nuxt class="container" />
    </div>
  </div>
</template>

<script>
import TheHeader from '~/components/TheHeader.vue'

export default {
  components: {
    TheHeader
  }
}
</script>

theheader
<template>
  <el-menu mode="horizontal" :router="true">
    <el-menu-item index="1" style="pointer-events:none;">
      Nuxt Diary App
    </el-menu-item>
    <el-menu-item index="2" :route="{ path: '/posts/' }">
      投稿一覧
    </el-menu-item>

    <no-ssr>
      <el-menu-item index="4" style="float: right;" :route="{ path: `/users/${user.id}` }" v-if="user">
        <span>{{user.id}}</span>
      </el-menu-item>
      <el-menu-item index="4" style="float: right;" :route="{ path: '/' }" v-else>
        <span>ログイン</span>
      </el-menu-item>
    </no-ssr>
    <el-menu-item index="5" style="float: right" :route="{ path: '/posts/new' }">
      新規投稿
    </el-menu-item>
  </el-menu>
</template>
css
html {
    font-size: 16px;
    word-spacing: 1px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
  }
  
  .wrapper {
    background: #FAFAFA;
    width: 100%;
    min-height: calc(100vh - 61px);
  }
  
  .el-card {
    flex: 1;
  }
  
  .container:not(.__nuxt-error-page) {
    width: 96%;
    max-width: 980px;
    padding: 30px 0;
    margin: 0 auto;
    min-height: calc(100vh - 61px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  
  .text-left {
    text-align: left;
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-right {
    text-align: right;
  }
  
  p {
    margin: 16px 0;
  }
◆ログインページの作成


Next Post Previous Post
No Comment
Add Comment
comment url