vue2.0 实现导航守卫 --- 齐枭飞 前端开发攻城狮（路由守卫） 使用vue-router+vuex进行导航守卫

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。

对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。

导航守卫（navigation-guards）这个名字，听起来怪怪的

全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法，否则钩子就不会被 resolved。

想要实现登录后才能进入主页等其他页面，不然都会跳转到登录页。但是Vuex有个不够完美的地方，一旦刷新页面就会没了，所以还要用到localStorage。

一、router.js:

import Vue from ‘vue’
import Router from ‘vue-router’
import HelloWorld from ‘@/components/HelloWorld’
import store from ‘…/store/index’

Vue.use(Router);
// 懒加载组件
const login = () => import(‘Components/common/login/index.vue’);
const loading = () => import(‘Components/common/loading/index.vue’);
const home = () => import(‘Pages/home/home.vue’);
const user = () => import(‘Pages/userManage/index.vue’);
const addUser = () => import(‘Pages/userManage/add/index.vue’);
const editUser = () => import(‘Pages/userManage/edit/index.vue’);
const menu = () => import(‘Pages/menuManage/index.vue’);
const umbrella = () => import(‘Pages/umbrellaManage/index.vue’);
const location = () => import(‘Pages/locationManage/index.vue’);
const order = () => import(‘Pages/orderManage/index.vue’);

const test = () => import(‘Pages/test.vue’);

const routes = [
// 登录页面
{
path: ‘/login’,
name: “login”,
component: login,
meta: {
requiresAuth: false
}
},

{
path: ‘*’,
redirect: ‘/home’,
name: ‘HelloWorld’,
component: HelloWorld,
children: [
// 测试页面
{
path: ‘/test’,
component: test,
meta: {
requiresAuth: true
}
},
// loading页面
{
path: ‘/loading’,
name: “loading”,
component: loading,
meta: {
requiresAuth: true
}
},

  // 主页
      {
        path: '/home',
        component: home,
        meta: {
          requiresAuth: true
        }
      },
      // 用户管理
      {
        path: '/user',
        component: user,
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/user/add',
        name: 'addUser',
        component: addUser,
        meta: {
          requiresAuth: true
        }
      },
      {
        path: '/user/edit',
        name: 'editUser',
        component: editUser,
        meta: {
          requiresAuth: true
        }
      },
      // 菜单管理
      {
        path: '/menu',
        name: 'menu',
        component: menu,
        meta: {
          requiresAuth: true
        }
      },
      // 雨伞管理
      {
        path: '/umbrella',
        name: 'umbrella',
        component: umbrella,
        meta: {
          requiresAuth: true
        }
      },
      // 租借点管理
      {
        path: '/location',
        name: 'location',
        component: location,
        meta: {
          requiresAuth: true
        }
      },
      // 订单管理
      {
        path: '/order',
        name: 'order',
        component: order,
        meta: {
          requiresAuth: true
        }
      },
    ]
  }
];

// 页面刷新时，重新赋值有没登录
if (window.localStorage.getItem('isLogin')) {
  store.commit('setIsLogin', window.localStorage.getItem('isLogin'));
}

const router = new Router({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requiresAuth)) {  // 判断该路由是否需要登录权限
    console.log(store.getters.isLogin);
    if (store.getters.isLogin) {  // 通过vuex 如果当前有登录
      next();
    }
    else {
      console.log("没有登录吖")
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
  else {
    next();
  }
});

export default router;

这里有四个需要重点关注的地方（引入和使用就不纳入其中了）：
1.单独一个routes数组用来存放路由变量，然后每一个路由对象都需要有个meta参数，里面有个requiresAuth（也可以命其他名），这个就是用来判断这个页面需不需要判断权限，所以login页面为false，其他页面都为true。

2.new一个router对象，刚刚在注意点1的数组作为参数，然后最后导出这个router对象给其他页面引用。
3.要有一个判断页面刷新，重新赋值有没登录。这个时候判断localStorage中的isLogin，如果为true，所以刷新前是有登录的，则提交触发vuex更改状态。
4.vue-router提供的钩子函数，在路由更换的时候，都会触发这个函数，这个时候就要用到注意点1的meta.requiresAuth，如果即将要进入的页面需要判断登录权限，检测vuex的isLogin，为true就可以进去，不然都跳转到登录页面。

二、Vuex

三 、modules/login.js

const login = {
  state: {
    // true为已经登录，false为没登录
    isLogin: false
  },
  mutations: {
    setIsLogin(state, isLogin) {
      state.isLogin = isLogin;
    }
  },
  actions: {
    
  },
}

export default login;

getters.js

const getters = {
  isCollapse: state => state.nav.isCollapse,
  isLogin: state => state.login.isLogin
};
export default getters

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import nav from './modules/nav'
import login from './modules/login'
// import app from './modules/app';
// import user from './modules/user';
// import menu from './modules/menu';
import getters from './getters';

Vue.use(Vuex);

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    nav,
    login
    // app,
    // user,
    // menu
  },
  getters
});

export default store

三、实际使用–>登录

handleSubmit() {
        this.$refs["loginForm"].validate((valid) => {
          if (valid) {
            if(this.loginForm.userName === "admin" && this.loginForm.password === "admin") {
              this.$notify({
                title: '恭喜你',
                message: '登录成功!',
                type: 'success'
              });
              // 触发setIsLogin方法改变vuex中isLogin的值，
              this.$store.commit('setIsLogin', true);
             // 改变localStorage中isLogin的值，
              window.localStorage.setItem('isLogin', true);
              // Cookies.set('Token', response.data.token)
              this.$router.push({path: '/home'});

            }
            else {
              this.$message({
                message: '登录失败：密码错误!',
                type: 'warning'
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
},

四、实际使用–>退出登录

handleCommand(command) {
        if(command === "exit") {
          // 触发setIsLogin方法改变vuex中isLogin的值，
          this.$store.commit('setIsLogin', false);
          // 改变localStorage中isLogin的值，
          window.localStorage.setItem('isLogin', false);
          this.$notify({
            title: '退出登录成功',
            message: '请重新登录',
            type: 'success'
          });
          this.$router.push({path: '/login'});
        }
}

<dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        欢迎你,{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="exit">退出登录</el-dropdown-item>
        </el-dropdown-menu>
</dropdown>