清华主页 - 清华新闻 - 综合时讯 - 正文

如果依赖vue(前端和后端分离版本)前端获取登录用户ID

步骤流程

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中c;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代码。

最后,在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。

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

首先导入包import store from "@/store";写在<script>标签中。<script>import store from "@/store";export default { data(){ return{ userId:store.state.user.id////给userID赋值缓存用户id } }}。。。。。</script>参考文章󿄚前台页面如何获取用户ID信息? · Issue #I3OVTU · 若依/RuoYi - Gitee.com。

2025-06-24 12:56:56

相关新闻

清华大学新闻中心版权所有,清华大学新闻网编辑部维护,电子信箱: news@tsinghua.edu.cn
Copyright 2001-2020 news.tsinghua.edu.cn. All rights reserved.