若依移动端拿取登录用户的user_id

本文介绍了在若依框架中,如何在尊重用户隐私的前提下,配置并获取用户ID,同时更新Vuex状态,包括对token、name、avatar、roles和permissions的管理,以及使用Promise处理异步请求的过程。
摘要由CSDN通过智能技术生成

前言:

因为若依为了保护用户的隐私所以没有把user_id存入token中所以需要添加一些配置拿取用户user_id,但是若依为大家存储用户名,头像,角色等信息
默认的存储的信息:

拿取这些是不用配置什么的只需要在js中编写拿取代码:

因为拿取的数据是个集合所以在data中定义tokenList集合对象存储所有信息

# 拿取所有的用户信息存储到tokenList集合对象中

this.tokenList = uni.getStorageSync("storage_data") || {};

# 通过点出他的名字拿取vuex_xxx 比如id就是vuex_id

this.username = this.tokenList.vuex_name 

1. 开始配置拿取用户user_id操作 

       1.1 修改user.js页面

    state: {
		token: getToken(),
		name: storage.get(constant.name),

		id: storage.get(constant.id),  # 添加id

		avatar: storage.get(constant.avatar),
		roles: storage.get(constant.roles),
		permissions: storage.get(constant.permissions)
	},

	mutations: {
		SET_TOKEN: (state, token) => {
			state.token = token
		},
		SET_NAME: (state, name) => {
			state.name = name
			storage.set(constant.name, name)
		},

		SET_ID: (state, id) => {  # 设置id数据
			state.id = id
			storage.set(constant.id, id)
		},

		SET_AVATAR: (state, avatar) => {
			state.avatar = avatar
			storage.set(constant.avatar, avatar)
		},
		SET_ROLES: (state, roles) => {
			state.roles = roles
			storage.set(constant.roles, roles)
		},
		SET_PERMISSIONS: (state, permissions) => {
			state.permissions = permissions
			storage.set(constant.permissions, permissions)
		}
	},

    // 获取用户信息
		GetInfo({
			commit,
			state
		}) {
			return new Promise((resolve, reject) => {
				getInfo().then(res => {
					const user = res.user
					const avatar = (user == null || user.avatar == "" || user.avatar == null) ? require("@/static/images/profile.jpg") : user.avatar
					const username = (user == null || user.userName == "" || user.userName == null) ? "" : user.userName

                    # 添加userId判读是否为空
					const userid = (user == null || user.userId == "" || user.userId == null) ? "" : user.userId

					if (res.roles && res.roles.length > 0) {
						commit('SET_ROLES', res.roles)
						commit('SET_PERMISSIONS', res.permissions)
					} else {
						commit('SET_ROLES', ['ROLE_DEFAULT'])
					}
					commit('SET_NAME', username)

                    # 添加提交userId
					commit('SET_ID', userid)

					commit('SET_AVATAR', avatar)
					resolve(res)
				}).catch(error => {
					reject(error)
				})
			})
		},

        2.2 修改constant.js和storage.js页面

       1.  修改 constant.js

            添加id:'vuex_id'

      2. 修改 storage.js

          添加constant.id

然后就可以通过这种方法拿取user_id

# 拿取所有的用户信息存储到tokenList集合对象中

this.tokenList = uni.getStorageSync("storage_data") || {};

# 通过点出他的名字拿取vuex_xxx 比如id就是vuex_id

this.id= this.tokenList.vuex_id

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要实现前后端交互,需要使用 AJAX 技术来向后端发送请求。以下是一个简单的实现步骤: 1. 在前端页面中,使用表单来收集用户输入的用户名和密码。 2. 在 JavaScript 中,使用 AJAX 技术向后端发送 POST 请求,将用户名和密码作为请求参数。 3. 后端接收到请求后,验证用户名和密码是否正确,如果正确则返回一个 JSON 格式的数据,包括用户的相关信息。 4. 前端接收到后端返回的数据后,可以根据返回的信息来判断用户是否已经登录成功,如果成功则可以跳转到其他页面。 下面是一个简单的代码示例: 前端代码: ```html <form> <label>用户名:</label> <input id="username" type="text"> <label>密码:</label> <input id="password" type="password"> <button id="login-btn">登录</button> </form> <script> var loginBtn = document.querySelector('#login-btn'); loginBtn.addEventListener('click', function(event) { event.preventDefault(); var username = document.querySelector('#username').value; var password = document.querySelector('#password').value; var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { // 登录成功,跳转到其他页面 window.location.href = '/home'; } else { alert('用户名或密码错误'); } } }; xhr.send(JSON.stringify({ username: username, password: password })); }); </script> ``` 后端代码(使用 Node.js + Express 框架): ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.post('/login', function(req, res) { var username = req.body.username; var password = req.body.password; // 在这里进行用户名和密码的验证 if (username === 'admin' && password === '123456') { res.json({ success: true, user: { name: '管理员', role: 'admin' } }); } else { res.json({ success: false, message: '用户名或密码错误' }); } }); app.listen(3000, function() { console.log('应用已启动,监听端口 3000'); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值