登录状态管理

liuqimichale
1 parent 13061512
Showing 4 changed files with 68 additions and 13 deletions
webintroduce/src/components/VHeader.vue
webintroduce/src/main.js
webintroduce/src/router/index.js
webintroduce/src/views/login.vue
@@ -20,7 +20,8 @@ export default {
       navLinks: [
         {name:'首页',linkPath:'/home'},
         {name:'解决方案',linkPath:'/solution'},
-        {name:'登录',linkPath:'/login'}
+        {name:'登录',linkPath:'/login'},
+        {name:'企业介绍',linkPath:'/enterprise'}
       ]
     }
   },
@@ -3,14 +3,33 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-
+import Cookies from 'js-cookie'
 require ('./assets/css/reset.css')
 Vue.config.productionTip = false
 router.beforeEach((to, from, next) =>{
-  console.log(to)
-  document.title = to.meta.title
-  next()
+
+  if(to.matched.some(record => record.meta.requiresAuth)){
+    if(Cookies.get('username')){
+      document.title = to.meta.title
+      next()
+    }else{
+      next({
+        path:'/login',
+        query: { redirect: to.fullPath }
+      })
+      document.title = '登录'
+    }
+
+
+  }else {
+    document.title = to.meta.title
+    next()
+  }
+
+  // console.log(to)
+  //
+  // next()
 })
 /* eslint-disable no-new */
@@ -19,7 +19,8 @@ export default new Router({
       name: 'home',
       component: home,
       meta: {
-        title: '首页'
+        title: '首页',
+        requiresAuth: false
       }
     },
     {
@@ -27,23 +28,37 @@ export default new Router({
       name: 'solution',
       component: solution,
       meta: {
-        title: '解决方案'
+        title: '解决方案',
+        requiresAuth: false
       }
     },
     {
-      path: '/enterprise/:id',
+      path: '/enterprise',
       name: 'enterprise',
       component: enterprise,
       meta: {
-        title: '企业'
-      }
+        title: '企业',
+        requiresAuth: true
+      },
+      child:[
+        {
+          path: '/enterprise/:id',
+          name: 'enterprise',
+          component: enterprise,
+          meta: {
+            title: '企业',
+            requiresAuth: true
+          },
+        }
+      ]
     },
     {
       path: '/login',
       name: 'login',
       component: login,
       meta: {
-        title: '登录'
+        title: '登录',
+        requiresAuth: false
       }
     }
   ]
 <template>
-    <div>登录页面没有公共的头部底部</div>
+    <div>登录页面没有公共的头部底部
+      {{username}}
+      <input type="text" v-model="username">
+      <input type="button" name="" value="登录" @click="loginBtn">
+    </div>
 </template>
 <script>
+import Cookies from 'js-cookie'
 export default {
-  name: 'login'
+  name: 'login',
+  data() {
+    return {
+      username: ''
+    }
+  },
+  methods: {
+    loginBtn() {
+      Cookies.set('username',this.username)
+      console.log(this.$route)
+      let redirect = decodeURIComponent(this.$route.query.redirect || '/');
+      this.$router.push({//你需要接受路由的参数再跳转
+        path: redirect
+      });
+    }
+  }
 }
 </script>