TWSNMP FC:ログイン画面の開発開始
今朝は猫に２時半に起こされました。さすがに眠いのでお願いして４時まで待ってもらいました。昨日、高校女子サッカーの決勝を観ながら裏方の処理の移植をほぼ完了したので今日から画面表示する部分を作るのを猫は察知したのかもしれない。彼は画面で何か動くのを見るのが好きなので！
最初に作るのはログイン画面にしました。復刻版はデスクトップアプリケーションなのでログインは必要ありませんがTWSNNP FCはNuxt.jsとGO言語のEchoを使ったシングルページWebアプリケーションとして開発しているのでちゃんと許可された人だけが使えるようにする必要があるためです。
JWTを使ってログイン
ログイン時の認証はJWTを使うことにしました。
GoogleにGO言語のEchoとNuxt.jsの組み合わせた環境でのJWTの使い方を聞いてみましたが、ドンピシャの説明は見つかりませんでした。そう都合のよいことはないので分けて調べました。
GO言語とEchoでJWTを使った例は、公式サイトにありました。
Echoはドキュメントの説明が分かりやすいので好んで使っています。
Nuxt.jsとJWTは、いろいろ調べましたが公式よりも
が参考になりました。テスト用にこのサイトのプログラムがそのまま使うことを考えました。できるだけて手抜きしたいので！
GO言語側は、Echoの初期化で
e.POST("/login", login)
// JWT保護されたRoute
r := e.Group("/api")
r.Use(middleware.JWT([]byte(p.Password)))
r.GET("/test", apiTest)にして、ログイン処理は、
type loginEnt struct {
Name string `json:"name" form:"name" query:"name"`
Password string `json:"password" form:"password" query:"password"`
}
func login(c echo.Context) error {
le := new(loginEnt)
if err := c.Bind(le); err != nil {
return echo.ErrUnauthorized
}
api := c.Get("api").(*WebAPI)
// とりあえずのパスワード認証
if le.Name != "test" || le.Password != "test" {
return echo.ErrUnauthorized
}
// トークン作成
token := jwt.New(jwt.SigningMethodHS256)
claims := token.Claims.(jwt.MapClaims)
claims["name"] = le.Name
claims["admin"] = true
claims["exp"] = time.Now().Add(time.Hour * 24).Unix()
t, err := token.SignedString([]byte(api.Password))
if err != nil {
return err
}
return c.JSON(http.StatusOK, map[string]string{
"token": t,
})
}ログイン後の処理を
type testResEnt struct {
ID int `json:"id"`
Name string `json:"name"`
NickName string `json:"nickname"`
}
func apiTest(c echo.Context) error {
r := new(testResEnt)
r.ID = 1
user := c.Get("user").(*jwt.Token)
claims := user.Claims.(jwt.MapClaims)
r.Name = claims["name"].(string)
r.NickName = "Test User"
return c.JSON(http.StatusOK, r)
}のようにします。
Nuxt.jsのサンプルのnuxy.config.jsを
axios: {
baseURL: 'http://localhost:8080/' //ここ
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'token' }, // ここ
user: { url: 'api/test', method: 'get',propertyName: ''}, // ここ
logout: false
}
}
}
}
}のように書き換えれば、TWSNMP FCのGO言語側をサーバーにしてテストできました。結果は、
のような感じでうまくいきまいした。
AIRでホットリロード
Nuxt.jsを使った開発では、
$npm run devでサーバー起動しておくとソースコードを変更すると自動で変更を反映した状態でサーバーを再起動してくれます。いちいちサーバー止めてビルドしてサーバーを起動するということをやらなくてすみます。開発中は、これを何百回とやることになるので嫌になってしまいます。自動で出来れば楽になります。GO言語側のサーバーも同じことがしたいので、この前読んだ本にRealizeというのがあることを知りました。でもRealizeは古ぽいので、
をみて
を試してみました。
いい感じなので使うことにしました。
nuxt.jsで作成したspaのフォルダを除外しないと
failed to watching /Users/ymimacmini/prj/twsnmp/twsnmpfc/spa/node_modules, error: bad file descriptorのエラーで起動できませんでした。
今日の作業内容
今日の作業は、
でした。Web画面の開発環境も整ったので明日からは画面表示の移植になると思います。
いいなと思ったら応援しよう！
