Vue 实现登录拦截（一）

技术要点：

1. vue
2. vue-router
3. store.js（储存信息）插件
4. mint-ui的使用

效果展示：

git

1.创建项目

vue init webpack vue-login-intercept 
cd vue-login-intercept 
npm install 

2.修改的原始的目录结构

-关闭的eslint的语法检查 build/webpack.base.config.js 全局搜索 eslint-loader 将其注释即可，切记 一定要的重新的 npm run dev

3.项目的文件目录结构

代码展示
组件：Hello.vue

<template>
  <div class="hello">
    <img src="../assets/logo.png">
    <h1>{{ msg }}</h1>
    <router-link :to="{name:'home'}" tag="div" class="home">首页</router-link>
    <router-link :to="{name:'personal'}" tag="div" class="personal">个人中心</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
<style scoped>
  .home, .personal {
    margin: 0 auto;
    font-size: 50px;
    padding: 10px;
    width: 400px;
    border: 1px solid gray;
    margin-bottom: 20px;
    border-radius: 40px;
  }
</style>

组件：home.vue

<template>
  <div class="home">
    <div class="back" @click="back">返回</div>
      首页
  </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {}
  },
  methods:{
    back(){
      this.$router.back(-1)
    }
  }
}
</script>
<style scoped>
  .home {
    width:100%;
    min-height: 100vh;
    font-size:80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .back {
    position: fixed;
    width: 100px;
    height: 30px;
    top:0;
    left: 0;
    font-size:30px;
  }
</style>

组件：personal.vue

<template>
  <div class="personal">
    <div class="back" @click="back">返回</div>
    个人中心
  </div>
</template>
<script>
  export default {
    name: 'personal',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods:{
        back(){
            this.$router.back(-1)
        }
    }
  }
</script>
<style scoped>
  .personal {
    width: 100%;
    min-height: 100vh;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .back {
    position: fixed;
    width: 100px;
    height: 30px;
    top:0;
    left: 0;
    font-size:30px;
  }
</style>

路由：index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import home from '@/components/home'
import personal from '@/components/personal'
Vue.use(Router)


const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },{
      path: '/home',
      name: 'home',
      component: home
    },{
      path: '/personal',
      name: 'personal',
      component: personal
    }
  ]
})

export default router

4.编写login.vue的组件

• 样式比较丑，没有写css来优化（不喜勿喷）
• v.model.trim 去掉首尾的空格
• @click.submit.prevent 阻止事件的重复提交

<template>
  <div class="login">
    <form class="form" @click.submit.prevent>
      <input type="text"  class="input" name="name" v-model.trim='formData.name' placeholder="姓名"><br>
      <input type="text"  class="input" name="phone" v-model.trim='formData.phone' placeholder="手机号"><br>
      <button class="input" type="submit" @click="loginHandler(formData)">登录</button>
    </form>
  </div>
</template>
<script>
  export default {
    name: 'login',
    data(){
      return {
        formData: {
          name: '',
          phone: ''
        }
      }
    },
  }
</script>
<style>
  .login {
    min-height: 100vh;
    width: 100%;
  }
  .form {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .input {
    width:300px;
    height: 80px;
  }
</style>

5.下载store.js的插件的

npm install store  -D

6. 编写local.storage.js的文件

文件的位置：assets/script/local.storage.js

import store from 'store';
import expirePlugin from 'store/plugins/expire';
store.addPlugin(expirePlugin);

//加载插件后的store
export { store };

// 登录的信息
export const getLogin = function () {
  const token = store.get('zhooson_login_token'); 
  return token || '';
};

基本的路由跳转的逻辑已经走通了，重点在下一章节！!