1.封装axios

main.js

import axios from 'axios'

//创建axios实例
const instance = axios.create({
    baseURL:   'ur',
    timeout: 1000,
})

// 请求拦截
instance.interceptors.request.use(function (config) {
  // 在请求之前做的事
  return config
}, function (err) {
  // 在请求错误后做的事
  return Promise.reject(err)
});

// 响应拦截
let myInterceptors = instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (err) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(err);
})

// 移除拦截器
instance.interceptors.response.eject(myInterceptors)

// 判断请求方式
export function request (type, url, params) {
  if (type == 'get') {
    return get(url, params)
  } else if (type == 'post') {
    return post(url, params)
  } else if (type == 'put') {
    return put(url, params)
  }
}

// get请求
function get(url, params) {
  return instance.get(url,params)
}
// post请求
function post(url, params) {
  return instance.post(url,params)
}
// put请求
function put(url, params) {
  return instance.put(url,params)
}

2.将登录成功之后的token，保存到客户端的sessionStorage中

原因：为了保证项目中除了登录之外的其他API接口，比须在登录之后才能访问，而且该token只能在当前网站打开期间生效，所以要将token保存在sessionStorage中

login.vue

 mounted() {
 function login(params) {
  return request(
    'post',
    // 拼接url（这个看后端传参需求决定是否要拼接）
    `/rqcode/query?uid=${params.uid}`,
    {id: 2, 
     uid:22}.then(res => {
        console.log(res);
        // 判断登录
        if(res.status !== 200) {
          return this.$message.error('登录失败');
        }
          this.$message.success('登录成功');
          // 生成token
          window.sessionStorage.setItem("token",res.data.token)
          // 路由跳转
          this.$router.push('/home')
    })
  },
  )
};
}

3.挂载路由导航守卫，保证只在必须登陆后才能访问其他页面

router.js

/ 挂载路由导航守卫（写在路由里面）
router.beforeEach((to, from, next) => {
  //判断是否在登录页面
  if (to.path === "/login") return next()
  // 获取token
  tokenStr = window.sessionStorage.getItem('token')
  //判断是否携带token
  if(!tokenStr) return next('/login')
})

这篇文章是我在学习前端过程中所总结的登录流程，如有不对的地方，望各位大佬能给出指导意见。