vue-router+vuex+localStorage导航守卫实例

使用localStorage模拟保存token,因为localStorage默认保存的是字符串,所以就限制保存isLogin为0就是未登录,要默认直接跳到/login页面,若为1就是默认到/home页面,没有localStorage的也是默认跳转到/login登录页

1.router.js--使用beforeEach前置导航判断是否要跳转/login页面

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import store from '@/store'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: 'home',
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/components/common/login'),
      meta: {
        requiresAuth: false
      }
    },
    {
      path: '/about/:id',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('./views/About.vue'),
      meta: {
        requiresAuth: true
      }
    }
  ]
})
// 页面刷新时，重新赋值有没登录
if (window.localStorage.getItem('isLogin')) {
  store.commit('setIsLogin', localStorage.getItem('isLogin'));
}

router.beforeEach((to, from, next) => {
  //xxx-0隐式转换为数字
  console.log(typeof(store.state.isLogin-0),store.state.isLogin-0)
  if (to.matched.some(r => r.meta.requiresAuth)) {  // 判断该路由是否需要登录权限
    if (store.state.isLogin-0 === 1) {  // 通过vuex 如果当前有登录
      next();
    }
    else {
      alert("没有登录哦!")
      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就可以进去，不然都跳转到登录页面。
*/

2.main.js--引入router.js,store

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'

Vue.config.productionTip = false
console.log(process.env.NODE_ENV)//打印看是开发环境还是发布环境//development

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.vuex部分store目录

1)index.js

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'
import getters from './getter'
import mutations from './mutation'
import actions from './action'

//Vue使用插件都要use一下
Vue.use(Vuex)


export default new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state,
    getters,
    mutations,
    actions
})

2.state.js

let defaultLogin = 0
try {
    if(localStorage.isLogin) {
        defaultLogin = localStorage.isLogin
    } 
} catch (error) {
    
}

export default {
    isLogin: defaultLogin
}

3.mutations.js

export default {
    setIsLogin(state, isLogin) {
        state.isLogin = isLogin
        try {
            localStorage.isLogin = isLogin
        } catch (error) {
            
        }
            
    }
}

4.登出也loginout.vue

5.登录页

6.ps.与上述情景无关,增加vue-router的组件间守卫钩子例子

app.vue

about.vue