// 在VueRouter的路由配置项中，增加meta属性，设置是否需要权限验证的标记
   // 用户中心路由
   {
     path: 'user',
     name: 'User',
     Component: User,
     meta: {
         // 需要权限验证
         requireAuth: true
     }
   }

npm i vue-router -D

import Vue from 'vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  const router = new VueRouter({
    // 路由规则
    routes: [
      {
        path: '/',
        name: 'Home',
        // 引入的模块默认是已经引入并定义了，这里不多描述
        component: Home,
        children: [
          {
            path: 'index',
            name: 'Index',
            component: Index,
            // 定义元信息
            meta: {
              // 权限验证标记 false 不进行校验拦截
              requireAuth: false
            }
          },
          {
            path: 'user',
            name: 'User',
            component: User,
            meta: {
              // 权限验证标记 true 进行校验拦截
              requireAuth: true
            }
          },
          {
            path: 'login',
            name: 'Login',
            component: Login,
            meta: {
              // 权限验证标记 false 不进行校验拦截
              requireAuth: false
            }
          }
        ]
      }
    ]
  })

const router = new VueRouter({
    routes: [
      // ...
    ]
  })    
  // 权限拦截-beforeEach路由钩子函数
  router.beforeEach (to, from, next) {
    // to 目的路由对象 from 来源路由对象
    if (to.match.some(rocode => recode.meta.requireAuth)) {
      /**
      * 登录状态-可使用aixos进行请求，拉取服务器数据，获取用户登录状态
      * 强烈建议在本地使用localStorage或sessionStorage和vuex共同管理用户登录态，避免每次进入时都拉取服务器端接口以验证用户是否登录，额外消耗对服务器的请求，提升用户体验
      * 如果已登录，则更新store中存储的loginName -- 详细查看下面的store配置
      * 未登录，则直接跳转走
      */ 
      let isLogin = 已登录 ? true : false
      // 执行拦截判定
      if (!isLogin) {
        // 跳转到登录模块
        // 处理方式一：借助next()方法
        next({
          name: 'Login',
          replace: 'true',
          // redirectUrl 用于标记登录后回跳的地址
          redirectUrl: to.fullPath
        })
        // 处理方式二：使用window.loaction.href方式，需要执行next(false)配合使用
        window.location.href = '指定的登录地址?redirectUrl=' + to.fullPath
        next(false)
      } else {
        // 已登录，直接进入
        next()
      }  
    } else {
      // 不执行拦截，直接进入该路由
      next()
    }
  } 

借助axios的拦截器：
  interceptors.request.use 请求拦截器
  interceptors.response.use 响应拦截器

不是所有的接口都要进行拦截的，比如：
    1. 发送和获取登录信息的接口
    2. 发送注册信息的接口
    3. 其他不需要用户态的接口

npm i axios -D

import axios from 'axios'
  import router from '@/router'
  // 具体数据仓库对象store配置请往下看
  import store from '@/store'
  const $http = axios.create({
    // 基本配置项
  })
  // 定义接口地址白名单
  const allowUrls = [
    '/getUserInfo',
    '/addUserInfo'
  ]
  // 请求拦截器 -- 发送请求前，判断是否存在登录信息
  $http.interceptors.resquest.use((config) => {
    // config.url 是请求的URL地址
    if (allowUrls.includes(config.url)) {
      // 判断是否登录 --- 本地信息以及vuex的store信息进行判定
      let isLogin = locationStorage.getItem('isLogin')
      if (!isLogin || !store.state.loginName) {
        // 携带当路由地址，跳转登录
        // router.currentRoute.fullPath
      } else {
        return config
      }
    } else {
      // 不需要判定则直接返回config配置
      return config
    }
  })
  // 响应拦截器
  $http.interceptors.response.use((res) => {
    // 判断是否需要验证权限
    if (allowUrls.includes(res.config.url)) {
      // 判断是否登录 --- 本地信息、vuex的store信息以及后端服务器响应回来的是否登录的标记
      let isLogin = locationStorage.getItem('isLogin')
      // 约定 code 10011 表示未登录
      if (!isLogin || !store.state.loginName || res.data.code === 10011) {
        // 携带当路由地址，跳转登录
        // router.currentRoute.fullPath
      } else {
        return config
      }
    } else {
      return res
    }
  })

npm i vuex -D

import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const store =  new Vuex.Store({
  state: {
    // 用户登录后，获取昵称
    loginName: ''
  },
  mutations: {
    updateLoginInfo (state, loginName) {
      state.loginName = loginName
    }   
  }
 })