优秀代码记录学习

router跳转 

router.beforeEach((to, from, next) => {
    document.title = `${to.meta.title} | vue-manage-system`;
    const role = localStorage.getItem('ms_username');
    if (!role && to.path !== '/login') {
        next('/login');
    } else if (to.meta.permission) {
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role === 'admin'
            ? next()
            : next('/403');
    } else {
        next();
    }
});

vue-router重定向 

{
    path: '/',
    redirect: (to) => {
      const { params, query } = to;
      if(qurry?.path) {
        return '/' + query.path;
      }
    } 
  },

axios的二次封装和使用

1. 安装axios：npm i axios -S
2. 创建一个文件来配置axios及创建
3. 首先创一个request.js来封装axios

import axios from 'axios'
const isDev = process.env.NODE_ENV  === 'development' // 判断环境
// 如果配置了多个的反向代理 --- 对象模式
const baseURL = isDev ？ '这里设置开发下的baseURL' : '线上的baseURL'
const request = axios.create({
    baseURL
})
// 请求拦截  请求前先经过这里
request.intercepters.request.use(config => {
    // 可以设置 加载的动画效果 的展示
    // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
    console.log('正在加载....')
    return config
}, erroe => return Promise.reject(error))
// 响应拦截
// 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => {
  // 可以设置加载的动画效果的隐藏  请求数据的处理等
  console.log('加载完毕')
  return response
}, (error) => {
  return Promise.reject(error)
})
export default request

• 基本的axios已经封装完成，需要请求的时候，统一管理请求可以新建一个index.js来进行管理

import request from './request' //这里引用上面导出的axios
export function getDate(params) {
    return rquest({
        url: 'data',
        method: 'post', //默认为get
        data: params // post 用data, get用params
    })
}