vue路由守卫、token过期处理、登陆后跳转到原页面

路由配置

想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫，最简单的说，路由守卫可以用来判断用户是否登录，该页面用户是否有权限浏览，一般利用token来实现。
配置路由守卫
在route.js中进行配置

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

import system from './router/system'
import doc from './router/doc'
import pages from './router/pages'
import order from './router/order'
import carnival from './router/carnival'
import knowledge from './router/knowledge'
import resource from './router/resource'
import course from './router/course'
import cloudService from './router/cloudService'

import tem404 from '@/views/system/404'
import tem204 from '@/views/system/204'
import dbKnowledge from '@/views/pages/database/database'

Vue.use(Router)

const routes = [
  // 前台数据库变为首页
  {
    path: '/',
    name: 'dbKnowledge',
    component: dbKnowledge,
    meta: { homePages: true }
  },
  ...system,
  ...doc,
  ...pages,
  ...order,
  ...carnival,
  ...knowledge,
  ...resource,
  ...course,
  ...cloudService,
  {
    path: '/404',
    name: 'Invalid',
    component: tem404,
    meta: { fullScreen: true }
  },
  {
    path: '/204',
    name: 'NoContent',
    component: tem204,
    meta: { homePages: true }
  },
  {
    path: '/control/204',
    name: 'NoContentControl',
    component: tem204
  }
]

export function createRouter () {
  const router = new Router({
    mode: 'history',
    routes
  })
  return router
}

token过期处理

vue-axios interceptors(拦截器)实际应用

// 公共的axios文件
import axios from 'axios'
import { message } from '@/utils'

export const BASEURL = '/api/'

axios.interceptors.response.use(data => {//请求拦截器
  const store = $nuxt.$store
  if (data.status === 204) {
    $nuxt.$router.replace('/204')
  }
  let _token = data.headers.authorization//使用http协议Header中的Authorization传递token
  if (_token) {
    store.commit('LOGIN', _token)//commit：同步操作，this.$store.commit('mutations方法名',值)
    store.dispatch('setUser')//dispatch：含有异步操作，例如向后台提交数据，this.$store.dispatch('action方法名',值)
  }
  return data //响应了拦截器（在响应之后对数据进行一些处理）
}, err => {
  return Promise.reject(err)//Promise.reject方法会返回一个新的 Promise 实例，该实例的状态为rejected
})

export function ajax (options) {
  let config = {
    url: options.url,
    method: options.method || 'get',
    params: options.params || {},
    data: options.data || {},
    headers: options.headers || {}
  }
  const store = $nuxt.$store
  const router = $nuxt.$router
  // 判断是否存在token，如果存在的话，则每个http header都加上token
  if (store.state.token) {
    config.headers.Authorization = store.state.token
  }
  return axios(config).catch(err => {
    if (err.response && err.response.status === 401) {
      store.commit('LOGOUT')
      let _currentRoute = router.currentRoute//当前路由的路由信息对象，包含了当前匹配路由的信息
      if (_currentRoute.name !== 'login') {
        router.replace({
          name: 'login',
          query: { redirect: _currentRoute.path }
        })
        message({
          message: err.response.data.operateMessage || '请登录后操作',
          type: 'error'
        })
      }
    } else if (err.response && err.response.status === 403) {
      store.commit('LOGOUT')
      store.commit('setLoginShow', true)
      message({
        message: err.response.data.operateMessage || '请登录后操作',
        type: 'error'
      })
    } else {
      console.log('error----', err)
    }
    return Promise.reject(err)
  })
}

some方法

some为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some返回 false。

Object.keys

Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

例如：

let obj = {
    name: 'haha', 
    age: 20,
    showName:  function () {}
}
Object.keys(obj)   //['name','age','showName']

处理数组时，返回数组各元素的索引值:

let arr = ['a', 'b', 'c'];
Object.keys(arr); // ['0', '1', '2']
 
let brr = [1, 3, 4];
Object.keys(brr); // ['0', '1', '2']

可自动排序：

let arr = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(arr)); // console: ['2', '7', '100']

组合用法：

let obj = {
    name: 'haha', 
    age: 20, 
}
 
Object.keys(obj).map((val, index)=>{
　　obj[val] // 可以针对obj的不同属性做不同处理
})

router.beforeEach((to, from, next)三个参数理解：
to：进入到哪个路由去
from：从哪个路由离开
next：路由的控制参数，常用的有next(true)和next(false)

路由守卫核心代码

router.js代码如下：

// 路由守卫核心代码
export default ({ app, store }) => {
	app.router.beforeEach((to, from, next) => {
	  const token = store.getters.token // 将浏览器中的token赋值给token常量
	  if (to.matched.some(record => record.meta.requireAuth || record.meta.homePages)) {
          //to.matched的数组，如果在record.meta中有requiresAuth或者homePages，那么就返回true，否则返回false，true时不做登录校验
	    if (Object.keys(from.query).length === 0) { //判断是否有from.query
	      next() //跳转进去
	    } else {
	      let redirect = from.query.redirect //目标被拦截时，记录redirect
	      if (to.path === redirect) {  //处理无限循环的问题
	        next()
	      } else {
	        if (Object.keys(to.query).length > 0) {//判断有query时，就next()跳转进去
	          next()
	        } else {
	          next({  //第一次跳转to路由是没有query的，所以加上query来记录我们需要的目标路由
	            path: to.path,
	            query: { redirect: redirect }
	          })
	        }
	      }
	    }
	  } else {
	    if (token) {//判断用户是否登录
	      if (Object.keys(from.query).length === 0) {//判断路由来源是否有query，处理不是目表路由的跳转的情况
	        next()登录了就直接跳转进去
	      } else {
	        let redirect = from.query.redirect //路由来源没有query目标，被拦截时，记录redirect
	        if (to.fullPath === redirect || redirect === '/login') {//如果目标路由地址中有redirect（注册）或者/login（登录），跳转进去
	          next()
	        } else {
	          next({ path: redirect })//否则当路由来源没有query目标被拦截后跳转到注册页
	        }
	      }
	    } else {
	      if (to.path === '/login') {
	        next()
	      } else {
	        next({
	          path: '/login',
	          query: { redirect: to.fullPath }
	        })
	      }
	    }
	  }
	})
	// 控制页面从顶部开始
	app.router.afterEach((to, from) => {
	  let _page = document.querySelector('.app_page')
	  if (_page) {
	    _page.scrollTop = 0
	  }
	})

	// 渲染一个路由的过程中，需要尝试解析一个异步组件时发生错误。
	app.router.onError((error) => {
	  const pattern = /^(Loading).*chunk.*failed/
	  console.log(error.message)
	  const isChunkLoadFailed = pattern.test(error.message)
	  console.log(isChunkLoadFailed)
	  if (isChunkLoadFailed) {
	    window.location.reload()
	  }
	})
}

应用场景：登录校验后跳转到之前指定页面的实现
1、用户点击购买需要下单，并跳转到订单页面，但是如果用户没有登录的话，中间有登录验证，会拦截
2、点击购买的时候，登录校验成功了，跳转到订单页面时，订单已创建，去付款即可
3、处理拦截至登录页，然后点击进入注册页，完善信息页，再回登录页，再登录进去，依然进去目标order页