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);//加载插件后的storeexport { store };// 登录的信息export const getLogin = function () {  const token = store.get('zhooson_login_token');   return token || '';};

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