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的公共参数都可以请求成功啦!

相关文章
|
存储 前端开发
Gin-Vue-Admin 前后端获取用户信息方式
Gin-Vue-Admin 前后端获取用户信息方式
380 0
Gin-Vue-Admin 前后端获取用户信息方式
|
JavaScript 前端开发 Java
vue3-element-admin 项目说明文档
vue3-element-admin 项目说明文档
vue-element-admin上传图片的功能,并且传url的值
vue-element-admin上传图片的功能,并且传url的值
125 0
|
5月前
|
JavaScript 算法 前端开发
vue中别再使用index做key啦!
vue中别再使用index做key啦!
|
5月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
8月前
|
API
Vue3-admin-template 框架修改登录页面
Vue3-admin-template 框架修改登录页面
639 0
|
Python
django auth模块使用jwt进行登录不能更新last_login!
今天使用django自带的用户系统,进行jwt,重写了user模型,使用手机登录,于是就想用django自带的登录验证... 哎,一切折腾都在于不熟悉
77 0
|
数据安全/隐私保护
vue3-admin-element框架登录如何修改?
vue3-admin-element框架登录如何修改?
2038 0
|
开发框架 前端开发 JavaScript
vue-element-admin--环境搭建
vue-element-admin--环境搭建

热门文章

最新文章