使用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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。