1026 VueJS 教學筆記 | vue login session
10/26VueJS教學筆記:Login登入機制實作-HackMD---title:10/26VueJS教學筆記:Login登入機制實作disqus:hackmd---10/26VueJS教學筆記:Login登入機制實作===綱要[TOC]Login登入機制實作---一般來說,登入後變更路由的驗證會看SessionStorange或Cookies中的token是否有效,由此判斷該進入哪個路由。![](https://i.imgur.com/zeNq9wD.png)先在`router.js`底下新增login的頁面與指定component名稱、路徑。```javascript=importVuefromvueimportRouterfromvue-routerimportCookiesfromjs-cookieVue.use(Router)constrouter=newRouter({routes...
10/26 VueJS 教學筆記: Login 登入機制實作 - HackMD--- title: 10/26 VueJS 教學筆記: Login 登入機制實作 disqus: hackmd --- 10/26 VueJS 教學筆記: Login 登入機制實作 === 綱要 [TOC] Login 登入機制實作 --- 一般來說,登入後變更路由的驗證會看 Session Storange 或 Cookies 中的 token 是否有效,由此判斷該進入哪個路由。 ![](https://i.imgur.com/zeNq9wD.png) 先在`router.js`底下新增 login 的頁面與指定 component 名稱、路徑。 ```javascript= import Vue from vue import Router from vue-router import Cookies from js-cookie Vue.use(Router) const router = new Router({ routes: [ { path: /, name: Loginm component: () => import(./views/Login.vue) }, // 其他路由 { path: /home, name: home, component: Home, meta: { requireAuth: true }, // 用來作為此頁是否需要權限驗證的設定 children: [...] }, // ... ] }) export default router ``` 打好基本的外觀並定義表單v-model: [Github範例](https://github.com/fortes1219/vue_0803/blob/0803/src/views/Login.vue) ```htmlmixed= <template> <div class="row vertical inset" data-width="20...