第三章起名叫画画的北北,主要原因是从现在开始,正式结合前端页面一起玩了.
我在写前端的时候,就有一种画画的感觉.
从这里开始,都是前后端一起介绍,并且前后代码会打相同的tag号.
后端增加两个接口,一个是获取当前登录用户的信息,一个是登出接口.
account/controllers/role.py
account/controllers/user.py
account/apis/user.py
account/urls/user.py
登出接口LogoutApi,里面其实没有进行任何操作.
如果我们的token是存入在redis中,可以在这里清除redis中对应的token.
当前用户接口CurrentUserApi,是根据header中带来的token来确定是哪个用户.
并返回该用户的基本信息、可见模块列表、可用权限列表.
前端可根据可见模块列表及可用权限列表来控制前端菜单及按钮的显示.
.env.development
package.json
src/api/user.js
src/directive/permission/permission.js
src/permission.js
src/settings.js
src/store/getters.js
src/store/modules/user.js
src/utils/auth.js
src/utils/request.js
src/views/login/components/SocialSignin.vue
src/views/login/index.vue
vue.config.js
前端需要根据后端实际情况修改.
比如请求header中统一增加token.
接口返回信息统一错误处理.
修改权限判断.
.env.development: 配置开发后端地址,我的后端运行在8000端口.
src/api/user.js:修改user相关接口地址,并且所有接口都使用post.
src/directive/permission/permission.js:原项目是基于roles来控制权限,我这里修改成按permissions.
src/permission.js:这里是控制菜单路由的,原项目是基于roles的,我这里修改成了按mods.
src/settings.js:这里title设置成我自己使用的名称,此名称就是浏览器标签页上显示的title.
src/store/getters.js:因为后续需要取用user_id、mods、permissions,所以在getters中提供获取方法.
src/store/modules/user.js:在user的state中增加id,mods、permissions,保存获取当前用户接口返回的数据.
并且提供对应的设置方法.
登录接口login,增加参数is_ldap,因为我们后端接口是这么区分标准用户和普通用户的.
src/utils/auth.js:原项目是把token存入cookie的,我这里修改成存入localStorage中,别问我为什么.
src/utils/request.js:这里主要是修改错误码的判断,我的后端接口正常返回为0,登录状态过期为10003.
同时我在header中设置的字段为token.
src/views/login/index.vue:修改登录页面,去掉无用的东西.
这里is_ldap暂时都设置成false,之后会加一个复选框.