分享最新技巧-vue用户登录菜单权限

Tips：本篇已加入系列文章阅读目录，可点击查看更多相关文章。

目录

前言
开始
    登录
    菜单权限
    运行测试
最后

前言

上一篇已经创建好了前后端项目，本篇开始编码部分。
开始

几乎所有的系统都绕不开登录功能，那么就从登录开始，完成用户登录以及用户菜单权限控制。
登录

首先用户输入账号密码点击登录，然后组合以下参数调用identityserver的/connect/token端点获取token：

{
grant_type: “password”,
scope: “HelloAbp”,
username: “”,
password: “”,
client_id: “HelloAbp_App”,
client_secret: “1q2w3e*”
}

这个参数来自ABP模板的种子数据：

我使用的是password flow，这个flow无需重定向。如果你的网站应用只有一个的话，可以这么做，如果有多个的话建议采用其他oidc方式，把认证界面放到identityserver程序里，客户端重定向到identityserver去认证，这样其实更安全，并且你无需在每个客户端网站都做一遍登录界面和逻辑。。。

还有一点，严格来说不应该直接访问/connect/token端点获取token。首先应该从identityserver发现文档/.well-known/openid-configuration中获取配置信息，然后从/.well-known/openid-configuration/jwks端点获取公钥等信息用于校验token合法性，最后才是获取token。ABP的Angular版本就是这么做的，不过他是使用angular-oauth2-oidc这个库完成，我暂时没有找到其他的支持password flow的开源库，参考：https://github.com/IdentityModel/oidc-client-js/issues/234

前端想正常访问接口，首先需要在HttpApi.Host，IdentityServer增加跨域配置：

前端部分需要修改的文件太多，下面只贴出部分主要代码，需要完整源码的可以去GitHub拉取。http://www.gzgyhjc.com

src\store\modules\user.js：

const clientSetting = {
grant_type: “password”,
scope: “HelloAbp”,
username: “”,
password: “”,
client_id: “HelloAbp_App”,
client_secret: “1q2w3e*”
};
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
clientSetting.username = username.trim()
clientSetting.password = password
login(clientSetting)
.then(response => {
const data = response
commit(‘SET_TOKEN’, data.access_token)
setToken(data.access_token).then(() => {
resolve()
})
})
.catch(error => {
reject(error)
})
})
},

// get user info
getInfo({ commit }) {
return new Promise((resolve, reject) => {
getInfo()
.then(response => {
const data = response</