若依vue(前后端分离版本)前端获取登录用户id
创始人
2024-11-04 11:06:43

步骤流程

1.找到user.js

2.在user.js中找到以下几个地方

  • 属性:state{}
  • 属性:mutations{}
  • 函数:GetInfo()

3.在user.js中添加代码 

4.在自己的页面中添加获取id的代码

步骤一

在该若依的版本中,从下列目录找到,ruoyi-ui->src->store->modules->user.js

 步骤二

属性state在页面中的位置

state: {     token: getToken(),     name: '',     avatar: '',     roles: [],     permissions: []   },

还有mutations

mutations: {     SET_TOKEN: (state, token) => {       state.token = token     },     SET_NAME: (state, name) => {       state.name = name     },     SET_AVATAR: (state, avatar) => {       state.avatar = avatar     },     SET_ROLES: (state, roles) => {       state.roles = roles     },     SET_PERMISSIONS: (state, permissions) => {       state.permissions = permissions     } }

最后是GetInfo方法

GetInfo({ commit, state }) {       return new Promise((resolve, reject) => {         getInfo().then(res => {           const user = res.user           const avatar = (user.avatar == "" || user.avatar == null) ?                     require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组             commit('SET_ROLES', res.roles)             commit('SET_PERMISSIONS', res.permissions)           } else {             commit('SET_ROLES', ['ROLE_DEFAULT'])           }           commit('SET_NAME', user.userName)           commit('SET_AVATAR', avatar)           resolve(res)         }).catch(error => {           reject(error)         })       })     },

步骤三

到此处开始添加代码

user.js中,state

添加id属性

state: {     token: getToken(),     name: '',     id:'',//添加的用户id     avatar: '',     roles: [],     permissions: []   },
mutations中添加SET_ID
mutations: { //添加方法     SET_ID: (state, userId) => {       state.id = userId     },     SET_TOKEN: (state, token) => {       state.token = token     },     SET_NAME: (state, name) => {       state.name = name     },     SET_AVATAR: (state, avatar) => {       state.avatar = avatar     },     SET_ROLES: (state, roles) => {       state.roles = roles     },     SET_PERMISSIONS: (state, permissions) => {       state.permissions = permissions     }

最后在GetInfo中添加,设置缓存id的代码

commit('SET_ID', user.userId)

// 获取用户信息     GetInfo({ commit, state }) {       return new Promise((resolve, reject) => {         getInfo().then(res => {           const user = res.user           const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组             commit('SET_ROLES', res.roles)             commit('SET_PERMISSIONS', res.permissions)           } else {             commit('SET_ROLES', ['ROLE_DEFAULT'])           }           commit('SET_ID', user.userId)//添加这行代码           commit('SET_NAME', user.userName)           commit('SET_AVATAR', avatar)           resolve(res)         }).catch(error => {           reject(error)         })       })     },

步骤三

在自己的页面中使用缓存中的用户id

首先导入包import store from "@/store";写在

参考文章:如何前台页面获取用户ID信息? · Issue #I3OVTU · 若依/RuoYi - Gitee.com

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...