feat(用户认证): 实现基于角色的页面跳转和登录状态检查

- 在App.vue中添加登录状态检查和用户信息获取
- 修改index.vue实现根据用户角色跳转到不同页面
- 更新pages.json调整底部导航栏和页面配置
- 优化user.js中的用户信息存储逻辑
This commit is contained in:
砂糖
2025-11-03 14:52:41 +08:00
parent d677c293e8
commit 42d858bc6b
5 changed files with 190 additions and 136 deletions

View File

@@ -30,8 +30,10 @@
},
checkLogin() {
if (!getToken()) {
this.$tab.reLaunch('/pages/login')
this.$tab.reLaunch('/pages/login')
return;
}
this.$store.dispatch('GetInfo')
}
}
}

View File

@@ -45,7 +45,8 @@
"path" : "pages/line/line",
"style" :
{
"navigationBarTitleText" : "产线监控"
"navigationBarTitleText" : "产线监控",
"navigationStyle": "custom"
}
}
// {
@@ -110,7 +111,7 @@
"list": [
{
"text": "产线",
"pagePath": "pages/index",
"pagePath": "pages/line/line",
"selectedIconPath": "/static/images/tabbar/home_.png",
"iconPath": "/static/images/tabbar/home.png"
},
@@ -125,13 +126,13 @@
"pagePath": "pages/mine/index",
"selectedIconPath": "/static/images/tabbar/mine_.png",
"iconPath": "/static/images/tabbar/mine.png"
},
{
"text": "扫码2",
"pagePath": "pages/easycode/easycode",
"selectedIconPath": "/static/images/tabbar/work_.png",
"iconPath": "/static/images/tabbar/work.png"
}
// {
// "text": "扫码2",
// "pagePath": "pages/easycode/easycode",
// "selectedIconPath": "/static/images/tabbar/work_.png",
// "iconPath": "/static/images/tabbar/work.png"
// }
]
},

View File

@@ -51,7 +51,7 @@
}
},
mounted() {
getDicts('easycode_type').then(res => {
getDicts('action_type').then(res => {
this.types = res.data
})
}

View File

@@ -1,5 +1,5 @@
<template>
<view class="production-page">
<!-- <view class="production-page">
<klp-header @lineChange="setActive" class="line-header"></klp-header>
@@ -10,42 +10,74 @@
<Zinc2 v-else-if="active == 3"></Zinc2>
<Zinc3 v-else-if="active == 4"></Zinc3>
</view>
</view>
</view> -->
</template>
<script>
import Acidity from '@/components/lines/acidity.vue'
import Paint from '@/components/lines/paint.vue'
import Zinc1 from '@/components/lines/zinc1.vue'
import Zinc2 from '@/components/lines/zinc2.vue'
import Zinc3 from '@/components/lines/zinc3.vue'
// 根据不同的全责跳转到不同的页面
// 如果是工人跳转到扫码页面
// 如果是管理员跳转到产线
export default {
components: {
Acidity,
Paint,
Zinc1,
Zinc2,
Zinc3
},
data() {
return {
active: 0
}
},
methods: {
next() {
if (this.active >= 5) {
this.active = 0
} else {
this.active += 1
created() {
// 检查用户角色
this.$store.dispatch('GetInfo').then(res => {
const roles = res.data.roles;
if (roles.includes('admin')) {
// 管理员角色,跳转到产线页面
uni.switchTab({
url: '/pages/line/line'
});
} else if (roles.includes('worker')) {
// 工人角色,跳转到扫码页面
uni.navigateTo({
url: '/pages/easycode/easycode'
});
}
},
setActive({ index, line }) {
this.active = index;
}
// else {
// // 其他角色,跳转到扫码页面
// uni.navigateTo({
// url: '/pages/easycode/easycode'
// });
// }
})
}
}
// import Acidity from '@/components/lines/acidity.vue'
// import Paint from '@/components/lines/paint.vue'
// import Zinc1 from '@/components/lines/zinc1.vue'
// import Zinc2 from '@/components/lines/zinc2.vue'
// import Zinc3 from '@/components/lines/zinc3.vue'
// export default {
// components: {
// Acidity,
// Paint,
// Zinc1,
// Zinc2,
// Zinc3
// },
// data() {
// return {
// active: 0
// }
// },
// methods: {
// next() {
// if (this.active >= 5) {
// this.active = 0
// } else {
// this.active += 1
// }
// },
// setActive({ index, line }) {
// this.active = index;
// }
// }
// }
</script>
<style scoped lang="scss">

View File

@@ -1,112 +1,131 @@
import config from '@/config'
import storage from '@/utils/storage'
import constant from '@/utils/constant'
import { isHttp, isEmpty } from "@/utils/validate"
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import {
isHttp,
isEmpty
} from "@/utils/validate"
import {
login,
logout,
getInfo
} from '@/api/login'
import {
getToken,
setToken,
removeToken
} from '@/utils/auth'
import defAva from '@/static/images/avatar.png'
const baseUrl = config.baseUrl
const user = {
state: {
token: getToken(),
id: storage.get(constant.id),
name: storage.get(constant.name),
avatar: storage.get(constant.avatar),
roles: storage.get(constant.roles),
permissions: storage.get(constant.permissions)
},
state: {
token: getToken(),
id: storage.get(constant.id),
name: storage.get(constant.name),
avatar: storage.get(constant.avatar),
roles: storage.get(constant.roles),
permissions: storage.get(constant.permissions)
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ID: (state, id) => {
state.id = id
storage.set(constant.id, id)
},
SET_NAME: (state, name) => {
state.name = name
storage.set(constant.name, name)
},
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)
}
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ID: (state, id) => {
state.id = id
storage.set(constant.id, id)
},
SET_NAME: (state, name) => {
state.name = name
storage.set(constant.name, name)
},
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)
}
},
actions: {
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
actions: {
// 登录
Login({
commit
}, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const uuid = userInfo.uuid
return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => {
console.log('token', res)
setToken(res.data.token)
commit('SET_TOKEN', res.data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
setToken(res.data.token)
commit('SET_TOKEN', res.data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
// 获取用户信息
GetInfo({
commit,
state
}) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
console.log('个人信息', res)
const user = res.data.user
let avatar = user.avatar || ""
if (!isHttp(avatar)) {
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
}
const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
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_ID', userid)
commit('SET_NAME', username)
commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
reject(error)
})
})
},
const user = res.data.user
let avatar = user.avatar || ""
if (!isHttp(avatar)) {
avatar = (isEmpty(avatar)) ? defAva : baseUrl + avatar
}
const userid = (isEmpty(user) || isEmpty(user.userId)) ? "" : user.userId
const username = (isEmpty(user) || isEmpty(user.userName)) ? "" : user.userName
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_ID', userid)
commit('SET_NAME', username)
commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
reject(error)
})
})
},
// 退出系统
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
storage.clean()
resolve()
}).catch(error => {
reject(error)
})
})
}
}
// 退出系统
LogOut({
commit,
state
}) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
storage.clean()
resolve()
}).catch(error => {
reject(error)
})
})
}
}
}
export default user
export default user