vue-next-admin 中添加token和id

简介: vue-next-admin 中添加token和id

在登陆请求成功以后,将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的公共参数都可以请求成功啦!

相关文章
|
5天前
vue3-admin-element-template配置正向代理报错
vue3-admin-element-template配置正向代理报错
37 0
|
6月前
vue-element-admin上传图片的功能,并且传url的值
vue-element-admin上传图片的功能,并且传url的值
58 0
|
存储 前端开发
Gin-Vue-Admin 前后端获取用户信息方式
Gin-Vue-Admin 前后端获取用户信息方式
262 0
Gin-Vue-Admin 前后端获取用户信息方式
|
5天前
|
API
Vue3-admin-template 框架修改登录页面
Vue3-admin-template 框架修改登录页面
|
5天前
|
JavaScript 定位技术 数据安全/隐私保护
vue-next-admin框架的认识
vue-next-admin框架的认识
462 0
|
6月前
|
前端开发 JavaScript
vue-element-admin上传图片的功能
vue-element-admin上传图片的功能
70 0
|
6月前
vue-element-admin提交表单数据到后端
vue-element-admin提交表单数据到后端
63 0
|
6月前
|
数据安全/隐私保护
vue3-admin-element框架登录如何修改?
vue3-admin-element框架登录如何修改?
|
6月前
vue3-admin-element安装
vue3-admin-element安装
|
10月前
|
存储 数据可视化 API
vue3-admin-template页面
vue3-admin-template页面