vue项目前端登录跳转,登录之后怎么调用接口根据角色选择对应的菜单列表
时间: 2023-12-06 16:45:30 浏览: 26
首先,在前端页面中需要有一个登录界面,用户输入账号和密码,点击登录按钮后,前端需要向后端发送登录请求,等待后端返回登录结果。如果登录成功,后端一般会返回一个token,前端需要将该token保存在本地,例如使用localStorage,以便之后的请求中使用。
接下来,根据不同的角色,前端需要向后端发送不同的请求获取对应的菜单列表。可以在登录成功之后,根据返回的用户信息中的角色信息,调用不同的接口来获取菜单列表。也可以将所有菜单列表一次性获取到,并在前端根据角色信息来筛选显示。
具体实现方式可以参考以下步骤:
1. 登录成功后,保存token到本地。
```js
localStorage.setItem('token', token);
```
2. 根据角色信息向后端发送请求,获取对应的菜单列表。
```js
// 假设后端接口为 /api/menu,需要在请求头中带上token
axios.get('/api/menu', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
},
params: {
role: user.role // 假设user为登录成功后返回的用户信息
}
}).then(res => {
// 处理响应结果
const menuList = res.data;
// TODO: 根据菜单列表渲染前端页面
}).catch(error => {
// 处理错误信息
});
```
3. 在前端页面中根据菜单列表渲染菜单。
```html
<template>
<div>
<ul>
<li v-for="menu in menuList" :key="menu.id">
<a :href="menu.url">{{ menu.name }}</a>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuList: []
}
},
mounted() {
this.getMenuList();
},
methods: {
getMenuList() {
axios.get('/api/menu', {
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
},
params: {
role: user.role // 假设user为登录成功后返回的用户信息
}
}).then(res => {
// 处理响应结果
this.menuList = res.data;
}).catch(error => {
// 处理错误信息
});
}
}
}
</script>
```
以上代码仅为示例,具体实现需要根据项目需求进行调整。