公共数据集采集-axios获取cookie中的session值

1

/*获取指定名称的cookie值*/ 
export function getCookieValue(name) {
  let result = document.cookie.match(
    "(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)"
  );
  return result ? result.pop() : "";
}

2

 const session = getCookieValue("session");
            console.log('session',session);

3如果需要前端把session存入cookie，我这里是后端直接存入

session

// 添加请求拦截器
service.interceptors.request.use(
  config => {
    console.log(config.headers)
    return config;
  },
  err => {
    console.log(err);
  }
);
service.interceptors.response.use(
  response => {
    console.log(window.location.hash)
    const hash = window.location.hash
    if (response.data.code === 8101 && hash !== '#/') {
      router.replace({ path: "/" });
      Message({
        message: "登陆过期",
        type: "warning"
      });
    }
    let res = {};
    res.status = response.status;
    res.data = response.data;
    return res;
  },
  err => console.log(err)
);

token

后台除了登录接口之外，都需要token权限验证，我们可以通过添加axios请求拦截器来添加token，以保证拥有获取数据的权限

在main.js中添加代码，在将axios挂载到vue原型之前添加下面的代码

\```

//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息

axios.interceptors.request.use(config=>{

//为请求头对象，添加token验证的Authorization字段

config.headers.Authorization = window.sessionStorage.getItem("token")

return config

})

4挂载路由导航守卫

ps：可以在跳转前执行操作
import { Dialog } from 'element-ui';
根据session:

 // 验证session
      router.beforeEach((to, from, next) => {
        const session = getCookieValue("session");
        if (!session && to.name !== 'login') {
          window.alert("登录已过期！")
          
          next({ name: 'login' }) 
        } else {
          next()
        }
      })

根据token

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

if(to.path === '/login')

return next();

//获取token

const tokenStr = window.sessionStorage.getItem('token');

if(!tokenStr)

return next('/login');

next();

})

export default router