项目中常见的问题解决方法

一、vue-路由导航守卫+token过期的处理

1、路由导航守卫：实现只有在登录或者注册成功的状态下才能进去系统，使用路由导航守卫处理

在router.js中配置路由导航守卫：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'
import Register from '../views/Register.vue'
import NotFound from '../views/404.vue'
import { from } from 'core-js/fn/array'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    redirect: '/index',
  },
  {
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '/register',
    name: 'register',
    component: Register
  },
  {
    path: '*',
    name: '/404',
    component: NotFound
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
// 路由守卫核心代码
router.beforeEach((to,from,next) => {
  // 先判断浏览器中是否已经有token了，有则true，否则false
  const isLogin = localStorage.token ? true : false
  
  //然后判断要去往的页面，如果是去往login和register页面的，就直接放行
  //如果不是去往login和register页面，则判断有没有token，如果有token就放行，否则就跳转login页面
  if (to.path == '/login' || to.path == '/register') {
    next
  }else {
    isLogin ? next() : next('/login')
  }
})
 
export default router

二、token过期的处理

1、在登录成功以后访问有token的接口的时候，需要使用请求拦截和响应拦截

2、请求拦截器，在请求拦截器添加统一的请求头

// 请求拦截
axios.interceptors.request.use(config => {
    startLoading()
 
    // 设置统一的请求头：如何配置访问有token的接口
    if (localStorage.token) {
        config.headers.Authorization = localStorage.token
    }
 
    return config
}, error => {
    return Promise.reject(error)
})

3、响应拦截器：返回的接口数据中，状态码未401，说明token过期或失效，则需要清除浏览器中缓存的token

// 响应拦截
axios.interceptors.response.use( response => {
    endLoading()
    return response
}, error => {
    endLoading()
    Message.error(error.response.data)
 
    // 获取错误状态码，token失效
    const { status } = error.response
    if (status == 401) {
        Message.error('token失效，请重新登录')
        // 清除token
        localStorage.removeItem('token')
 
        // 重新跳转到login页面
        router.push('/login')
    }
 
    return Promise.reject(error)
})

二、vue配置路由的方法

1、在router.js中首先导入vue和是vue-router的包

2、导入组件模块

3、Vue.use(Router)

4、向外暴露一个router的实例

exprot default new Router({routers:[{路由对象}，{path:"路径"，name:"组件名字"，component:"组件名字"}]})

5、在main.js中导入路由，在new的vue实例中添加导入的路由

三、Vue.use的作用以及使用

在Vue中我们引入第三方包的时候使用的都是import的形式引入的

但是引入了以后我们还是需要进行Vue.use的操作

有的组件还会进行Vue.prototype.$something=something

我们在使用axios发送请求的时候，通过import axios from = 'axios'的方式引入，但是有的那时候会再加上一句Vue.prototype.$axios = axios，加这句话的作用是：在vue的原型上添加一个$axios，通过在去全局注册的这种方式，在后面的文件中都可以使用

Vue.use()是什么：通过全局的方法Vue.use()使用插件，他会自动阻止对此注册相同的插件，他必须在调用new Vue()启动后完成，，同时他必须传递一个参数，参数可以是Object或者Function，如果是Object必须定义一个install的方法，是Function的话就会把Function函数当做install方法

Vue.use()的使用：他实际调用的是插件得install这个方法，所以在引入得插件中有install方法就必须使用Vue.use()