5-vue中的路由拦截

登录成功后

 此时的状态管理中

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
      user: {
         name:window.localStorage.getItem('user'|| '[]')==null ? "未登录":JSON.parse(window.localStorage.getItem('user' || '[]')).name,
         username:window.localStorage.getItem('user'|| '[]')==null ? "":JSON.parse(window.localStorage.getItem('user' || '[]')).username,
         userface:window.localStorage.getItem('user'|| '[]')==null ? "":JSON.parse(window.localStorage.getItem('user' || '[]')).userface,
         roles:window.localStorage.getItem('user'|| '[]')==null ? "":JSON.parse(window.localStorage.getItem('user' || '[]')).roles,
      }
    },
    mutations: {
      login (state,user) {
         state.user=user;
         window.localStorage.setItem('user',JSON.stringify(user));
      }
    }
  })

登录和首页

 路由守卫

router.beforeEach((to, from, next) => {
  
  if(to.name=='login'){ //如果是登录页直接放行
    next();
    return;
  }

  var name=store.state.user.name; //如果不是登录页，判断用户是否登录

  if(name=="未登录"){ //如果未登录
    if(to.meta.requireAuth || to.name==null){ //判断请求的是那个页面
      next({path: '/', query: {redirect: to.path}}) //path:'/'是跳转到/路径，query后面的是重定向要去的路径
    }else{
      next();
    }
  }else{
    next();
  }
})

当在浏览器地址栏中输入home时候如果没登陆，跳转到登录页面。