版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mr_EvanChen/article/details/80848352
使用场景：例如，在做权限控制的时候，不同角色的用户通常展示出来的侧边栏也是不一样的，或者是界面中有的操作或许会被隐藏。这里展示，后台返回用户所拥有的权限到前端，前端把这些信息保存起来，在其他页面调用。
这里采用的是sessionStorage来实现存储数据的功能，sessionStorage数据在当前浏览器窗口关闭后自动删除。登录时，存储用户信息，代码如下：
<script>
import axios from 'axios'
export default {
data() {
return {
username: "",
password: "",
}
},
methods: {
login() {
var vm = this
var params = new URLSearchParams();
params.append('username', this.username);
params.append('password', this.password);
axios.post("/api/v1/login/loginUser", params)
.then(function(response) {
if (response.data.ret == -1) {
alert("用户名或密码错误！")
} else {
// 存储用户信息，其实就是这一句话
sessionStorage.setItem('userInfo', JSON.stringify(response.data.data))
vm.$router.push({path:'/index'});
}
})
.catch(function(error) {
console.log("Error: " + error);
});
},
}
}
</script>在其他页面取数据时，代码如下：
<script>
export default {
data() {
return{
}
},
methods: {
hasPermission(val) {
var restoredSession = JSON.parse(sessionStorage.getItem('userInfo'));
var roles = restoredSession.user.roles;
for(var i=0; i<roles.length; i++){
for(var j=0; j<roles[i].authorities.length; j++){
if(val == roles[i].authorities[j].mtag){
return true;
}
}
}
if(restoredSession.isAdmin==true){
return true;
}
return false;
},
}
}
</script>