--------------------- 后台主页 --------------------
1.1 获取用户的基本信息
- 导入需要的脚本:
<!-- 导入 jQuery -->
<script src="/assets/lib/jquery.js"></script>
<!-- 导入自己封装的 baseAPI -->
<script src="/assets/js/baseAPI.js"></script>
<!-- 导入自己的 js 文件 -->
<script src="/assets/js/index.js"></script>
- 定义 getUserInfo 函数:(获取用户的基本信息)
function getUserInfo() {
$.ajax({
method: 'GET',
url: '/my/userinfo',
success: function(res) {
if (res.status !== 0) {
return layui.layer.msg('获取用户信息失败!')
}
renderAvatar(res.data)
}
1.2 渲染用户头像
- 定义 renderAvatar 函数:
(因为刚注册的用户,没有 nickname 名称,所以需要判断)
(刚注册的用户没有头像,所以也需要判断)
function renderAvatar(user) {
1. 获取用户的名称
var name = user.nickname || user.username
2. 设置欢迎的文本
$('#welcome').html('欢迎 ' + name)
3. 按需渲染用户的头像
if (user.user_pic !== null) {
$('.layui-nav-img')
.attr('src', user.user_pic)
.show()
$('.text-avatar').hide()
} else {
$('.layui-nav-img').hide()
var first = name[0].toUpperCase()
$('.text-avatar')
.html(first)
.show()
}
}
1.3 统一为有权限的接口设置headers请求头
- 在 baseAPI的 ajaxPrefilter 中添加如下代码:
(查询判断,如果 api 中 有 my 的字符。 则 该 ajax 请求 需要 用户的 安全码,)
if (options.url.indexOf('/my/') !== -1) {
options.headers = {
Authorization: localStorage.getItem('token') || ''
}
}
1.4 实现退出功能(这个调用了 layui 的框架,用的 confirm 方法)
- 修改退出的 <a> 链接如下:
<a href="javascript:;" id="btnLogout">
<span class="iconfont icon-tuichu"> </span>
退出
</a>
- 实现退出功能:
$('#btnLogout').on('click', function() {
layer.confirm('确定退出登录?', {
icon: 3, title: '提示' }, function(index) {
localStorage.removeItem('token')
location.href = '/login.html'
layer.close(index)
})
})
})
1.5 控制用户的访问权限
- 在调用有权限接口的时候,指定 complete 回调函数:
重点!!!! 不论成功还是失败,最终都会调用 complete 回调函数!!!!
complete: function(res) {
if (res.responseJSON.status === 1 && res.responseJSON.message === '身份认证失败!') {
localStorage.removeItem('token')
location.href = '/login.html'
}
}
})
}
1.6 优化权限控制的代码(ajaxPrefilter 函数总结)
- 将权限控制的代码,从每个请求中,抽离到 ajaxPrefilter 中: (baseAPI.js 代码总结)
注意:每次调用 $.get() 或 $.post() 或 $.ajax() 的时候,
会先调用 ajaxPrefilter 这个函数
$.ajaxPrefilter(function(options) {
1. 在发起真正的 Ajax 请求之前,统一拼接请求的根路径
options.url = 'http://www.liulongbin.top:3007' + options.url
2. 统一为有权限的接口,设置 headers 请求头
if (options.url.indexOf('/my/') !== -1) {
options.headers = {
Authorization: localStorage.getItem('token') || ''
}
}
3. 全局统一挂载 complete 回调函数
options.complete = function(res) {
if (res.responseJSON.status === 1 && res.responseJSON.message ==