写在前面：
项目地址：GitHub - jianjiayi/Merchant: vue全家桶开发商户后台管理，vue2.0手把手教你开发商户管理端后台
有什么不明白的，可以发邮件给我：m13121378101@163.com；
在上一篇文章我们已经搭建好了一个基本的后台页面，没有看到的同学，可以点这里vue2.0手把手教你开发商户管理端后台（一）之基础篇 - 简书
还记得吗，我们在编写路由的时候特意留下了一个字段：auth:false;
现在来说下，定义这个字段，就说当跳转路由的时候，如果auth == false的话，那么我们就要求用户必须登录才能查看。
一、什么叫：路由守卫？
这里借用下官网说的：可以查看官网解释：Vue Router | 导航守卫
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
二、如何实现路由守卫？
1、在src/views文件下新建login.vue:
2、在src/router/index.js下添加如下路由信息：
3、我们在修改main.js，添加路由守卫：
现在重启下项目：npm run dev，在浏览器输入：http://localhost:8080/#/
是不是自动跳转到：http://localhost:8080/#/login这个链接了。
在地址连输入这个链接：http://localhost:8080/#/goods/list，是不是页跳转到了登录页
这样就添加上了路由守卫。
这样看着太不美观了吧！我随便输入一个地址，定义好的跳转了login，没有定义的就不跳转了，应该调到404页面呀！那我们去写一个404页面吧！
4、在src/views文件下新建目录如下：
404.vue代码：
再去修改src/router/index.js路有文件：
我们在浏览器地址栏 输入：http://localhost:8081/#/111111
是不是就直接跳转到：http://localhost:8081/#/404
我们在美化下login.vue页面和404页面吧！
1、login.vue:
2、404.vue:这个页面就随便找个图片添加就可以了
我们下效果图：
三、如何保存用户登录信息呢？
用户信息放到store里但是需要缓存到sessionStorage中,如：
store.js中：
state: {
userInfo: sessionStorage.getItem('xxx-info');
},
mutations: {
setUserInfo(state, info) {
state.userInfo=info;
sessionStorage.setItem('xxx-info', info);
}
}
登录成功：
this.$store.commit('setUserInfo',info);
需要用户数据直接vuex中获取：
this.$store.state.userInfo;
