Nuxt Server-Middleware

前陣子需要利用server middleware做fb oauth功能,於是我就在middleware資料夾新增了fbauth.js,內容:

export default async function (req, res, next) {
  var querystring = require('querystring')
  var axios = require('axios')

  var query = querystring.parse(req._parsedOriginalUrl.query)
  var appId = query.appId
  var redirectUri = query.redirectUri.replace('#_=_', '')
  var code = query.code

  if (!appId || !redirectUri || !code) {
    // response fail
    res.writeHead(404, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ msg: 'Login Failed' }))
    return false
  }

  try {
    // get access token
    var clientSecret = 'xxxxx'
    var url = `https://graph.facebook.com/v6.0/oauth/access_token?client_id=${appId}&redirect_uri=${redirectUri}&client_secret=${clientSecret}&code=${code}`
    var result = await axios.get(url)
    var token = result.data.access_token

    // get userid
    var useridUrl = `https://graph.facebook.com/me?&access_token=${token}`
    var uinfo = await axios.get(useridUrl)
    var uid = uinfo.data.id

    // response success
    res.writeHead(200, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ token: token, uid: uid }))
  } catch (e) {
    // response fail
    res.writeHead(404, { 'Content-Type': 'application/json' })
    res.end(JSON.stringify({ msg: 'Auth Failed' }))
  }
}

結果build完之後,發現clientSecret竟然也一起打包進client端的js裡!!

於是我查了關於如何不將code打包進client side的資料後,就在外面包了一層 if (process.env.VUE_ENV === ‘server’) 如下:

export default async function (req, res, next) {
  if (process.env.VUE_ENV === 'server') {
    oauth的code...
  }
}

問題就解決了!但總覺得不是很合理,明明叫server-middleware但卻會被build進client-side用的js。

直到最近重翻doc才發現,當初secret key會被打包進去的原因是,因為當初我覺得反正都是middleware,就一起放middleware資料夾。但當我將server middleware分別放入新建的server-middleware資料夾後,發現原本發生的問題都不存在了…恩…總之就是我沒仔細看文件啦…orz

因此可以推定,middleware資料夾內的所有檔案,跟mixin資料夾內的所有檔案一樣,都會被打包進app.xxxx.js內,而不是有需要的時候才load。雖然這樣看起來是很合理,但隨著網站越長越大,很多共用的東西要拉出來的時候,就會累積越來越多非頁面關鍵需求的東西,這點似乎有點麻煩…

瀏覽器分頁標籤變身術

為什麼會發這篇,是因為我發現他躺在草稿分類中兩年了…甚至也忘了當初為什麼只存了草稿沒有發文的原因。總之,這是個讓你一秒換瀏覽器分頁ICON跟標題的教學。可以讓你在不須關閉分頁的情況之下,分頁列上的內容不至於被發現你在看不該看的東西。步驟如下:

把這個連結-> 收件夾 – nihao78@gmail.com拉到工具列上
step1
不知道有沒有人發現我在email address方面的小巧思 XD

到你想隱藏的標題跟ICON的畫面,按下剛剛拉上去的連結
step2

按下去後會像這樣變身!!!
step3

隱藏在一些分頁中,顯得非常自然!
step4

我用Firefox示範,不過其他瀏覽器的操作方法應該也是大同小異。有些瀏覽器可能預設沒有把書簽工具列顯示出來,總之去打開顯示就可以了。By the way, 上班要專心喔,啾咪!

18啦!鬧鐘 Domino Clock

18啦!鬧鐘 Domino Clock

這是一個造型非常簡單的鬧鐘,方方正正的造型,僅黑白的顏色,只有上方有一凹陷。

天亮鬧鐘一響,非得在凹槽中擲下鬧鐘所附的骰子,並且符合鬧鐘右下角的隨機組合,鬧種才肯罷休。

時鐘的各項設定功能,也只需要用骰子,觸碰凹槽的感應裝置,即可完成時間與鬧鐘設定。