LIFF+Vue.js(Vue Router) のClient Routingでエラーになる問題
対象者
- LINEのLINE Front-end Framework 利用者
- Vue.js/vue router 利用者
- Client Routingをhashで実施している方
問題
vue routerを利用してClient Routingを実施したアプリをLIFFへデプロイすると、
ホワイトアウトする。
バージョン
package.json 一部抜粋
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
},
"dependencies": {
"axios": "^0.18.0",
"buefy": "^0.7.1",
"moment": "^2.22.2",
"vue": "^2.5.17",
"vue-class-component": "^6.0.0",
"vue-cli-plugin-s3-deploy": "^3.0.0",
"vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@types/jest": "^23.1.4",
"@vue/cli-plugin-babel": "^3.1.1",
"@vue/cli-plugin-typescript": "^3.1.1",
"@vue/cli-plugin-unit-jest": "^3.1.1",
"@vue/cli-service": "^3.1.4",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"ts-jest": "^23.0.0",
"typescript": "^3.0.0",
"vue-template-compiler": "^2.5.17"
}
}
解決方法
履歴管理方法を URL Hash => HTML5 History API へ変更することで解消されます。
具体的には、 VueRouter の mode プロパティを history へ変更します。
import VueRouter from 'vue-router'
export default new VueRouter({
mode: 'history', // ← 'hash' から
routes: [ ],
})
原因
LIFFアプリの起動時に、下記のようなURLが生成されます。
元URL: https://example.com/app
↓
LIFF起動: https://example.com/app#xxxx=ooooo
起動時に # を末尾に、その後に = 区切りで情報を付与しています。
(付与されている詳細な情報については、指定されている値が気になるので割愛します。)
LIFF側で # を付与してしまうため、 hashベースのルーティングを利用している場合、
意図しないパスへと変更されてしまいます。
そのため、ホワイトアウトしてしまう問題が発生します。
vue routerでは、HTML5ベースのHistory APIに対応していたため、
そちらに切り替えることで、対応することができました。
所感
URLに情報を付与する場合は、ドキュメントに記載もらえるとありがたいと思いました。
また、付与されている情報がセンシティブな点も気になりましたが、
基本ユーザーには見えないように、LIFF側で担保されているはずです。