步骤1

在router/index.js中创建router实例

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
// 公共路由
export const constantRoutes = [...]

// 防止连续点击多次路由报错
let routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}
// 创建路由
export default new Router({
  mode: 'history', // 去掉url中的#
  base: process.env.VUE_APP_WEB_BASE,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

步骤2

在src/permission.js中设置白名单，将目标页面的路径放入白名单列表（whiteList）中

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/auth-redirect', '/bind', '/register', '/targetUrl']

router.beforeEach((to, from, next) => {
  NProgress.start()
  const token = localStorage.getItem('token')
  if (getToken() || token) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/index' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Message.error(err)
            next({ path: '/' })
          })
        })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
  // next()
  // NProgress.done()
})

router.afterEach(() => {
  NProgress.done()
})

注：这一步已经实现免密访问页面了，但是页面中的接口请求需要token的话，还需要额外配置

步骤3

在页面加载时直接调用登录接口获取token值（这个方法很不好，但是时间有限只能这么做了，如果大家有更好的方法欢迎提出🥰）

src/main.js（这部分代码可以写在需要访问的页面文件中）

new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App),
  mounted() {
    this.getToken();
  },
  methods: {
    getToken() {
      axios
        .post('/loginUrl', {
          username: 'Lily',
          password: '123456',
        })
        .then(response => {

          const token = response.data.data.access_token
          // 将token值存储在浏览器的本地存储中
          localStorage.setItem('token', token)
        })
        .catch(error => {
          console.error('获取token失败：', error)
        })
    },
  }
})

步骤四

request.js

const token = localStorage.getItem('token')
    if (token && !isToken || getToken()) {
      let lang = localStorage.getItem('lang')
      if (!lang) {
        lang = 'zh'
      }
      if (window.self !== window.top) {
        config.headers['fromSource'] = 'iframe'
      }
      config.headers['lang'] = lang
      config.headers['Authorization'] = token ? 'Bearer ' + token : 'Bearer' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }

现在所有的接口请求时都会有token值了