路由拦截

进某个页面时需要先登录

router/index.js

const routes = [
  {
    path: '/learn',
    name: 'Learn',
    component: Learn,
    //给该路由增加参数requireAuth,为true才能进入该路由
    meta:{
      requireAuth:true
    }
  },
]

vuex中 参数islogin，保存登录状态

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    islogin:sessionStorage.getItem('islogin')||false,
    uid:sessionStorage.getItem('uid')||0,
    uname:sessionStorage.getItem('uname')||"",
    utype:sessionStorage.getItem('utype')||"",
    author:sessionStorage.getItem('author')||"",
    // course:''
    // JSON.parse(sessionStorage.getItem('course'))取字符串转对象的时候
  },
  mutations: {
    login_mutation(state,payload){
      state.islogin=true;
      state.uid=payload.u_id;
      state.uname=payload.ue_username;
      state.utype=payload.u_type;
      state.author=payload.author;
    },
    out_mutation(state){
      state.islogin=false;
      state.uname='';
      state.uid=0;
      state.utype='';
      state.author='';
    }
  },
  actions: {

  },
  modules: {
  }
})

main.js使用router.beforeEach（）

router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){//如果requireAuth为true,则该页面需要先登录才能进
		if(store.state.islogin){//如果已登录，则进入
			next()
		}else{
			next({path:'/login'})//否则未登录，跳转登录页，登陆后进入
		}
	}else{//如果requireAuth为false,则该页面不需要登录就可以进入
		next()
	}
})