问题1:获取当前用户信息
获取当前用户id或其它信息
user.js
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
const user = {
state: {
token: getToken(),
id: '',
name: '',
avatar: '',
roles: [],
permissions: [],
shop: [] // 店铺列表
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ID: (state, id) => {
state.id = id
},
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
},
SET_SHOP: (state, shop) => {
state.shop = shop
},
},
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 => {
setToken(res.token)
commit('SET_TOKEN', res.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
const shop = res.shop
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)
// 设置店铺
commit('SET_SHOP', shop)
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', [])
// 设置店铺
commit('SET_SHOP', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
}
export default user
getters.js
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
dict: state => state.dict.dict,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
shop: state => state.user.shop, // 设置店铺
permission_routes: state => state.permission.routes,
topbarRouters:state => state.permission.topbarRouters,
defaultRoutes:state => state.permission.defaultRoutes,
sidebarRouters:state => state.permission.sidebarRouters,
}
export default getters
问题2:若依部署nginx配置
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name 127.0.0.1;
charset utf-8;
location / {
root /home/front/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:9999/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
问题2:若依分页多选
<template>
<div>
<!-- 按钮组 -->
<el-row :gutter="10" class="mb8">
<el-button @click="toggleSelection()">取消选择</el-button>
</el-row>
<el-table
ref="multipleTable"
:row-key="getRowKey"
v-loading="loading"
:data="dataList"
@selection-change="handleSelectionChange"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
>
<el-table-column type="selection" :reserve-selection="true" width="55" />
<el-table-column label="序号" fixed>
<template #default="scope">
<span>{{
(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
}}</span>
</template>
</el-table-column>
<el-table-column property="name" label="名称" />
<el-table-column property="date" label="日期" />
<el-table-column property="address" label="地址" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
export default {
name: "Test",
data() {
return {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 遮罩层
loading: false,
// 数据集
dataList: [],
// 总条数
total: 0,
// 数据
datas: [
{
id: 1,
date: "2016-01-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id: 2,
date: "2017-03-04",
name: "王虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
id: 3,
date: "2017-04-01",
name: "王小",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 4,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 5,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 6,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 7,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 8,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 9,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 10,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 11,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
{
id: 12,
date: "2016-05-03",
name: "李三",
address: "上海市普陀区金沙江路 1516 弄",
},
],
// 选择项
ids: [],
};
},
mounted() {
this.getList();
},
methods: {
// 获取唯一标识
getRowKey(row) {
return row.id;
},
// 分页获取数据
getList() {
this.loading = true;
this.dataList = JSON.parse(JSON.stringify(this.datas)).splice(
(this.queryParams.pageNum - 1) * this.queryParams.pageSize,
this.queryParams.pageSize
);
this.total = this.datas.length;
this.loading = false;
},
// 多选
handleSelectionChange(e) {
this.ids = e.map((item) => item.id);
},
// 取消多选
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
};
</script>