login add

src/App.vue

 <template>
   <div id="app">
-    <Header />
-    <div class="app-body">
-
-      <router-view/>
-    </div>
+    <router-view/>
   </div>
 </template>
-<script>
-import '@/assets/rem'
-import Header from '@/views/Header'
-export default {
-  components: { Header }
-}
-</script>
-
 
 <style lang="scss">
 #app {
@@ -22,16 +10,7 @@ export default {
   font-size: 0.16rem;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  // text-align: center;
   color: #2c3e50;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100vh;
-  .app-body {
-    width: 100%;
-    height: 100%;
-    display: flex;
-  }
 }
 </style>

src/assets/js/utils.js

 import store from 'store'
 
 export function setItem(key, value) {
+  // let time = new Date()  过期策略后面具体到项目考虑
+
   return store.set(key, value)
 }
 

src/main.js

@@ -5,6 +5,8 @@ import store from './store/index'
 
 import 'normalize.css'
 import '@/assets/css/global.scss'
+// REM
+import '@/assets/rem'
 
 Vue.config.productionTip = false
 

src/router.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import app from '@/assets/js/utils'
+
+import Home from './views/Home'
+import MapView from './views/MapView'
+import Login from './views/Login'
 
 Vue.use(Router)
 
-export default new Router({
+let router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes: [
+  routes: [{
+      path: '/login',
+      name: 'login',
+      component: Login,
+      meta: {
+        requiresAuth: false
+      }
+    },
     {
       path: '/',
       name: 'home',
-      component: Home
+      component: Home,
+      children: [{
+        path: '',
+        redirect: 'mapView'
+      }, {
+        path: 'mapView',
+        name: 'mapView',
+        component: MapView
+      }]
     }
     // ,
     // {
@@ -24,3 +43,20 @@ export default new Router({
     // }
   ]
 })
+
+router.beforeEach((to, from, next) => {
+  console.log(to, 'router');
+  if (to.meta.requiresAuth !== false) {
+    let token = app.getItem('Authorization')
+    if (!token) {
+      next('/login');
+      return;
+    } else {
+      next();
+    }
+  } else {
+    next();
+  }
+});
+
+export default router

src/views/Home.vue

 <template>
-  <div class="home">
-    <MapView />
+  <div class="home-router">
+    <Header />
+    <div class="home-router-body">
+      <router-view />
+    </div>
   </div>
 </template>
-
 <script>
-// @ is an alias to /src
-// import AMap from '@/components/map/AMap'
-import MapView from './Home/MapView'
+import Header from '@/views/Header'
 export default {
-  name: 'home',
-  components: {
-    MapView
-  }
+  components: { Header }
 }
 </script>
+
 <style lang="scss" scoped>
-.home {
+.home-router {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .home-router-body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
 }
 </style>

src/views/Login.vue

+<template>
+  <div class="login-container">
+    <button @click="login">登录</button>
+  </div>
+</template>
+<script>
+import { setItem } from '@/assets/js/utils'
+export default {
+  methods: {
+    login () {
+      setItem('Authorization', 'xxx')
+
+      this.$router.push('/')
+    }
+  }
+}
+</script>

src/views/MapView.vue

+<template>
+  <div class="home">
+    <MapView />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+// import AMap from '@/components/map/AMap'
+import MapView from './Home/MapView'
+
+export default {
+  name: 'home',
+  components: {
+    MapView
+  }
+}
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .left-context {
+    width: 5rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+  .right-context {
+    width: 5rem;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+</style>