路由拦截器// 全局守卫

Posted 2020-12-01 1825224252qq

1.为什么需要路由拦截器

为了防止用户在知道组件名称的情况下，没有登录而直接进入相应的页面下，所以要为路由设置一个拦截器，来判断用户是否登录过。

2.怎样设置路由拦截器：

分析：当我们第一次登录的时候，向服务器发送请求，服务器会给我们一个token标记符（这个token时前后台约定好的一个值），客户端拿到这个token后将它保存到本地localstorage或vueX中，当我们再次访问时，将这个token在携带给服务器。服务器会通过算法校验这个token的合法性（这个token会有一个有效期），如果合法，则不干涉，不合法则强制跳转到登录界面。

 

import axios from ‘axios‘

const baseURL = ‘http://localhost:8888/api/private/v1/‘

axios.defaults.baseURL = baseURL

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

    // 将token给到一个前后台约定好的key中，作为请求发送

    // mytoken是我们第一次登录成功后，服务器会返回给我一个token值，我们将它保存在localstorage中

    let token = localStorage.getItem(‘mytoken‘)  // 获取本地存储的token值

    if (token) {　　　　　　　　// 判断token值是否存在

　　// 个人认为在此期间可以再次判断 token是否还在有效期内，如果在，就将token放在请求头中；如果不在，就将token= ‘‘,并返回错误信息

      config.headers[‘Authorization‘] = token // 如果token值存在，就将token值放在请求头中，发送给服务器

    }

    return config

  }, function (error) { 　　　　 // 如果不存在，就返回一个错误信息

    // Do something with request error

    return Promise.reject(error)

  })

 

3.当我我们设置了拦截器后，我们可以注册一个全局守卫（在main.js入口文件中注册），防止未登录的用户跳转到其他页面

 

 

// 注册一个全局守卫。作用是在路由跳转前对路由判断，防止未登录的用户跳转到其他页面

router.beforeEach((to, from, next) => {

  let token = localStorage.getItem(‘mytoken‘)

  // 如果已经登录，那我不干涉你，让你随便访问

  if (token) {

    next()

  } else {

    if (to.path !== ‘/login‘) {

      // 如果没有登录，但你访问其他需要登录的页面，那我就让你跳到登录页面去

      next({path: ‘/login‘})

    } else {

      // 如果没有登录，但你访问的login，那就不干涉你，让你访问

      next()

    }

  }

})