vue2.0手把手教你开发商户管理端后台（二）之全局路由守卫

写在前面：

项目地址：GitHub - jianjiayi/Merchant: vue全家桶开发商户后台管理，vue2.0手把手教你开发商户管理端后台

有什么不明白的，可以发邮件给我：[email protected]；

在上一篇文章我们已经搭建好了一个基本的后台页面，没有看到的同学，可以点这里vue2.0手把手教你开发商户管理端后台（一）之基础篇 -

还记得吗，我们在编写路由的时候特意留下了一个字段：auth:false;

0001

现在来说下，定义这个字段，就说当跳转路由的时候，如果auth == false的话，那么我们就要求用户必须登录才能查看。

一、什么叫：路由守卫？

这里借用下官网说的：可以查看官网解释：Vue Router | 导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

二、如何实现路由守卫？

1、在src/views文件下新建login.vue:

0002

2、在src/router/index.js下添加如下路由信息：

0003

3、我们在修改main.js，添加路由守卫：

0004

现在重启下项目：npm run dev，在浏览器输入：http://localhost:8080/#/

是不是自动跳转到：http://localhost:8080/#/login这个链接了。

在地址连输入这个链接：http://localhost:8080/#/goods/list，是不是页跳转到了登录页

0005

这样就添加上了路由守卫。

这样看着太不美观了吧！我随便输入一个地址，定义好的跳转了login，没有定义的就不跳转了，应该调到404页面呀！那我们去写一个404页面吧！

4、在src/views文件下新建目录如下：

0006

    404.vue代码：

0007

再去修改src/router/index.js路有文件：

0008

我们在浏览器地址栏 输入：http://localhost:8081/#/111111

是不是就直接跳转到：http://localhost:8081/#/404

0009

我们在美化下login.vue页面和404页面吧！

1、login.vue:

0010

0010-1

0010-2

2、404.vue:这个页面就随便找个图片添加就可以了

我们下效果图：

0011

三、如何保存用户登录信息呢？

用户信息放到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;

我们在下一章将如何使用vuex+sessionStorage保存永不登录信息？