在登陆请求成功以后,将token和id存起来,vit的session存没用,是框架自己封装的方法,看不懂的可以用seeeionStorage来存,我这里也是演示的这个,请求的时候我是使用将框架粉装的request
useLoginApi().signIn({ account: state.ruleForm.userName, password: state.ruleForm.password, }).then(async (result) => { console.log(result); state.loading.signIn = true; // 存储 token 到浏览器缓存 // Session.set('token', Math.random().toString(36).substr(0)); sessionStorage.setItem('token', result.data.token) sessionStorage.setItem('id', result.data.data.id) // 模拟数据,对接接口时,记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断(模拟数据) Cookies.set('userName', state.ruleForm.userName); if (!themeConfig.value.isRequestRoutes) { // 前端控制路由,2、请注意执行顺序 const isNoPower = await initFrontEndControlRoutes(); signInSuccess(isNoPower); } else { // 模拟后端控制路由,isRequestRoutes 为 true,则开启后端控制路由 // 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/" const isNoPower = await initBackEndControlRoutes(); // 执行完 initBackEndControlRoutes,再执行 signInSuccess signInSuccess(isNoPower); } }).catch((err) => { console.log(err); });
存起来以后再去ruquest页面也就是框架封装好的请求拦截器里取出来去添加就好啦
// 添加请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求之前做些什么 token if (sessionStorage.getItem('token')) { // console.log(sessionStorage.getItem('token')); config.headers!['Authorization'] = `${Session.get('token')}`; config.headers = { token: sessionStorage.getItem('token'), id: sessionStorage.getItem('id') } } return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } );
需要token和id的公共参数都可以请求成功啦!