使用vue-router+vuex进行导航守卫(转)

前言：想要实现登录后才能进入主页等其他页面，不然都会跳转到登录页。但是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'});
        }
}

<el-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>
</el-dropdown>

作者：Lia代码猪崽
链接：https://www.jianshu.com/p/f920b0e994dc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。