-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
274 lines (265 loc) · 31.4 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>学习-JWT认证机制原理</title>
<url>/2022/12/13/%E5%AD%A6%E4%B9%A0-JWT%E8%AE%A4%E8%AF%81%E6%9C%BA%E5%88%B6%E5%8E%9F%E7%90%86/</url>
<content><![CDATA[<h2 id="JWT组成部分"><a href="#JWT组成部分" class="headerlink" title="JWT组成部分"></a>JWT组成部分</h2><p>主要由三部分组成 : 分别是 Header(响应头) 、Payload(有效荷载)、Signature(签名)</p>
<p>Header和Signature负责<strong>安全</strong>部分，Payload才是用来存储加密后的<strong>用户信息</strong></p>
<p>三者之间用 . 分隔，格式如下：<span id="more"></span></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Header.Patload.Signture</span><br></pre></td></tr></table></figure>
<h2 id="认证流程"><a href="#认证流程" class="headerlink" title="认证流程"></a>认证流程</h2><p>客户端收到服务器的JWT后，会把它存在<strong>localStorage</strong>或sessionStorage中。之后客户端每次向服务器发请求时都会将JWT带上。 </p>
<p>推荐做法：客户端在发请求时将JWT放在HTTP请求头的<strong>Authorization</strong>中，格式如下：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Authorization：Bearer <token></span><br></pre></td></tr></table></figure>
<h2 id="后端具体实现过程"><a href="#后端具体实现过程" class="headerlink" title="后端具体实现过程"></a>后端具体实现过程</h2><ol>
<li><p>安装jsonwebtoken，用于生成JWT字符串。</p>
</li>
<li><p>安装express-jwt，用于将JWT解析变回用户信息（JSON对象）。</p>
</li>
<li><p>定义secret密钥工具，用于加密和解密。</p>
<p>当生成JWT，要用secret进行加密。</p>
<p>当收到JWT，要进行解密，根据解密后的用户信息提供数据给前端。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">//直接定义一个scretKey变量就行 </span><br><span class="line">const secretKey = '随便什么都行 越复杂越好'</span><br></pre></td></tr></table></figure></li>
<li><p>以<strong>用户登录</strong>为例。</p>
<p>对于<strong>用户第一次发请求</strong>。</p>
<p>当用户提交登录请求时，后端判断用户账号密码是否正确，若正确则进行以下步骤（只取关键代码）：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">const jwt = require('jsonwebtoken') //引入jsonwebtoken</span><br><span class="line">const secretKey = '随便什么都行 越复杂越好'//定义密匙</span><br><span class="line">//调用jsonwebtoken的sign方法，用户信息变JWT send给前端</span><br><span class="line">res.send({</span><br><span class="line"> status:0,</span><br><span class="line"> message:'登录成功',</span><br><span class="line"> token:jwt.sign({ username: userinfo.username },secretKey, { expiresIn: '30s'})</span><br><span class="line">})</span><br><span class="line">//jwt.sign 参数一 为用户信息对象；参数二 为上面定义的密匙；参数三 expiresIn为有效时间，此为30s后失效。</span><br></pre></td></tr></table></figure>
<p><strong>注意：jwt.sign有三个参数，分别是：用户信息对象，加密密匙，配置对象</strong></p>
</li>
<li><p>对于<strong>用户第二次及以后</strong>发请求，需要做以下编码：</p>
<p>注册中间件，后端用来解析收到的请求头中Authorization字段的token，将其还原成JSON对象，通过此信息从数据库拿对应的数据响应给客户端。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">const expressJWT = reuqire('express-jwt') //引入用于解析的中间件</span><br><span class="line">const secretKey = '随便什么都行 越复杂越好'//定义密匙</span><br><span class="line">app.use(expressJWT({ secret:secretKey }).unless({ path: [/^\/api\//] }))//注册中间件</span><br><span class="line">// 上面的.unless（{}）用来指定哪些接口不需要访问权</span><br></pre></td></tr></table></figure></li>
<li><p>token过期导致解析失败的处理</p>
<p>定义一个处理错误的中间件：</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">app.use((err,req,res)=>{</span><br><span class="line"> if(err.name == 'UnauthorizedError'){</span><br><span class="line"> return res.send({ status:401, message:'无效的token' })</span><br><span class="line"> } </span><br><span class="line"> //若是其他错误</span><br><span class="line"> res.send({ status:500, message:'未知错误' })</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li>
</ol>
]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>node</tag>
</tags>
</entry>
<entry>
<title>学习-js中的this指向问题</title>
<url>/2022/11/11/%E5%AD%A6%E4%B9%A0-js%E4%B8%AD%E7%9A%84this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98/</url>
<content><![CDATA[<h3 id="1-在函数外定义变量存储this指向"><a href="#1-在函数外定义变量存储this指向" class="headerlink" title="1.在函数外定义变量存储this指向"></a>1.在函数外定义变量存储this指向</h3><span id="more"></span>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="title function_">getplace</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">let</span> that = <span class="variable language_">this</span> <span class="comment">//这里在success函数外定义了that来存储this指向</span></span><br><span class="line"> uni.<span class="title function_">getLocation</span>({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'gcj02'</span>,</span><br><span class="line"> <span class="attr">geocode</span>:<span class="literal">true</span>, </span><br><span class="line"> <span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">res</span>) {</span><br><span class="line"> <span class="comment">//此处略</span></span><br><span class="line"> that.<span class="property">location</span> = province+city+district+street</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(location)</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<h3 id="2-将普通函数变为箭头函数"><a href="#2-将普通函数变为箭头函数" class="headerlink" title="2.将普通函数变为箭头函数"></a>2.将普通函数变为箭头函数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="attr">getplace</span>:<span class="function">()=></span> { <span class="comment">//这里使用箭头函数，箭头函数本身没有this，所以依旧指向window</span></span><br><span class="line"> uni.<span class="title function_">getLocation</span>({</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'gcj02'</span>,</span><br><span class="line"> <span class="attr">geocode</span>:<span class="literal">true</span>,</span><br><span class="line"> <span class="attr">success</span>: <span class="keyword">function</span>(<span class="params">res</span>) {</span><br><span class="line"> <span class="comment">//此处略</span></span><br><span class="line"> that.<span class="property">location</span> = province+city+district+street</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(location)</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>
<h3 id="3-使用call、apply、bind改变this指向"><a href="#3-使用call、apply、bind改变this指向" class="headerlink" title="3.使用call、apply、bind改变this指向"></a>3.使用call、apply、bind改变this指向</h3><ol>
<li><p>call</p>
<p>第一个参数：新的this指向</p>
<p>第二个参数：实参</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">a,b,c</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>,a+b+c); <span class="comment">// this指向window</span></span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">fn</span>();</span><br><span class="line"> fn.<span class="title function_">call</span>(<span class="variable language_">document</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);<span class="comment">//call改变之后this指向document </span></span><br><span class="line"> <span class="comment">//输出 #document 6 1,2,3是实参 结果相加为6</span></span><br></pre></td></tr></table></figure></li>
<li><p>apply</p>
<p>第一个参数：新的this指向</p>
<p>第二个参数：数组（数组里面为实参）</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">a,b,c</span>){</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>,a+b+c); </span><br><span class="line"> }</span><br><span class="line"> <span class="title function_">fn</span>();</span><br><span class="line"> fn.<span class="title function_">apply</span>(<span class="variable language_">document</span>,[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]); </span><br></pre></td></tr></table></figure></li>
<li><p>bind</p>
<p>第一个参数：同上</p>
<p>第二个参数之后：实参</p>
<p><strong>返回值为一个新的函数</strong></p>
<p><strong>使用时需要手动调用返回的新函数</strong>（不会自动执行）</p>
</li>
</ol>
<p><strong>以上三者的区别：</strong></p>
<p>call、apply与bind区别：前两个<strong>可以自动执行</strong>，bind<strong>不会自动执行</strong>，需要手动调用<br>call、bind与apply区别：前两个都有<strong>无数个参数</strong>，apply只有<strong>两个参数</strong>，而且第二个参数为数组</p>
]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>js</tag>
</tags>
</entry>
<entry>
<title>学习-uniapp的上传方案</title>
<url>/2022/11/08/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%8B%E7%9A%84%E4%B8%8A%E4%BC%A0%E6%96%B9%E6%A1%88/</url>
<content><![CDATA[<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><ol>
<li>uni-file-picker</li>
</ol>
<ul>
<li><p>为uniapp内置组件，使用无需引入其他模块。<span id="more"></span></p>
</li>
<li><p>依赖sass，需要下载sass插件</p>
</li>
<li><p><strong>只支持H5和微信小程序，且微信小程序要使用wx.chooseMessageFile()</strong></p>
</li>
<li><p>跟unicloud数据的对接更加友好方便，有一些api可以直接使用。</p>
</li>
</ul>
<ol start="2">
<li>u-upload</li>
</ol>
<ul>
<li>为u-View的组件，需下载u-View组件库并引入</li>
<li>无平台限制，支持app、h5、小程序</li>
<li>属性丰富，回调函数多</li>
</ul>
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><ol>
<li>uploadFile(Object object)</li>
</ol>
<ul>
<li><p>为unicloud的客户端api</p>
</li>
<li><p>使用阿里云时，cloudpath为云端文件名</p>
</li>
<li><p>使用腾讯云时，cloudpath为文件绝对路径</p>
</li>
</ul>
<ol start="2">
<li>uniCloud.uploadFile(Object uploadFileOptions)</li>
</ol>
<ul>
<li><p>为unicloud云函数api，在编写云函数时使用</p>
</li>
<li><p>包含有uploadFileOption函数，其参数有cloudPath和fileContent</p>
<p>对于cloudPath的使用同上。</p>
</li>
</ul>
]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>uniapp</tag>
</tags>
</entry>
<entry>
<title>学习-uniapp中App开发使用高德SDK获取定位</title>
<url>/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/</url>
<content><![CDATA[<h3 id="第一步-安装JRE8环境，如有可跳过"><a href="#第一步-安装JRE8环境，如有可跳过" class="headerlink" title="第一步 安装JRE8环境，如有可跳过"></a>第一步 安装JRE8环境，如有可跳过</h3><p>这一步网络上有很多完整的教程，记得配置环境就行。</p>
<h3 id="第二步-生成签名证书（使用JRE环境中的keytool命令）"><a href="#第二步-生成签名证书（使用JRE环境中的keytool命令）" class="headerlink" title="第二步 生成签名证书（使用JRE环境中的keytool命令）"></a>第二步 生成签名证书（使用JRE环境中的keytool命令）</h3><ol>
<li><p>进入jre的<strong>根目录</strong>，在此目录打开cmd，输入下面keytool命令后回车 <span id="more"></span></p>
<p> <img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112155919991.png" alt="image-20221112155919991"></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore</span><br><span class="line">• testalias是证书别名，可修改为自己想设置的字符，建议使用英文字母和数字</span><br><span class="line">• test.keystore是证书文件名称，可修改为自己想设置的文件名称</span><br></pre></td></tr></table></figure></li>
<li><p>之后会出现下面代码，按其提示填写即可。个人开发的话随便填。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Enter keystore password: //输入证书文件密码，输入完成回车 </span><br><span class="line">Re-enter new password: //再次输入证书文件密码，输入完成回车 </span><br><span class="line">What is your first and last name? </span><br><span class="line"> [Unknown]: //输入名字和姓氏，输入完成回车 </span><br><span class="line">What is the name of your organizational unit? </span><br><span class="line"> [Unknown]: //输入组织单位名称，输入完成回车 </span><br><span class="line">What is the name of your organization? </span><br><span class="line"> [Unknown]: //输入组织名称，输入完成回车 </span><br><span class="line">What is the name of your City or Locality? </span><br><span class="line"> [Unknown]: //输入城市或区域名称，输入完成回车 </span><br><span class="line">What is the name of your State or Province? </span><br><span class="line"> [Unknown]: //输入省/市/自治区名称，输入完成回车 </span><br><span class="line">What is the two-letter country code for this unit? </span><br><span class="line"> [Unknown]: //输入国家/地区代号（两个字母），中国为CN，输入完成回车 </span><br><span class="line">Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct? </span><br><span class="line"> [no]: //确认上面输入的内容是否正确，输入y，回车 </span><br><span class="line"></span><br><span class="line">Enter key password for <testalias> </span><br><span class="line"> (RETURN if same as keystore password): //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="第三步-查看证书信息，保存SHA1码"><a href="#第三步-查看证书信息，保存SHA1码" class="headerlink" title="第三步 查看证书信息，保存SHA1码"></a>第三步 查看证书信息，保存SHA1码</h3><p>证书如果按上面步骤生成后会在<strong>jre根目录</strong>下，证书文件名字为test.keystore。cmd中输入以下命令可查看证书信息，复制保存好其中的SHA1码。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">keytool -list -v -keystore test.keystore </span><br><span class="line">Enter keystore password: //输入密码，回车</span><br></pre></td></tr></table></figure>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112160305449.png" alt="image-20221112160305449"></p>
<h3 id="第四步-注册高德地图sdk服务"><a href="#第四步-注册高德地图sdk服务" class="headerlink" title="第四步 注册高德地图sdk服务"></a>第四步 注册高德地图sdk服务</h3><ol>
<li>进入高德开发平台，注册登录后点击 应用管理—我的应用。</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112152535646.png" alt="image-20221112152535646"></p>
<ol start="2">
<li>点击创建新应用，填写应用类型和应用名称后，点击新建</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112152650103.png" alt="image-20221112152650103"></p>
<ol start="3">
<li>点击新创建应用的设置，填写关键信息。</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112152751562.png" alt="image-20221112152751562"></p>
<ol start="4">
<li>发布版安全码为上面保存的SHA1码，PackageName为uniapp的包名。</li>
</ol>
<p>包名获取：打开uniapp的项目，依次点击 运行-运行到手机或模拟器-制作自定义调试基座。其中的Android包名就是</p>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112153142508.png" alt="image-20221112153142508"></p>
<ol start="5">
<li>提交后就有了key，暂时<strong>别关</strong>这个界面</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112153310910.png" alt="image-20221112153310910"></p>
<h3 id="第五步-uniapp对接高德sdk。"><a href="#第五步-uniapp对接高德sdk。" class="headerlink" title="第五步 uniapp对接高德sdk。"></a>第五步 uniapp对接高德sdk。</h3><ol>
<li>进入uniapp，依次打开 manifest.json-App模块配置-Maps，勾选高德地图，打开刚刚的高德开发平台网页，将key值粘贴到appkey_android上。(appkey_ios也可以先填上同样的key，以后要用再回来改)</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112153826427.png" alt="image-20221112153826427"></p>
<ol start="2">
<li>依次点击 运行-运行到手机或模拟器-制作自定义调试基座，将各信息填写完毕。证书别名为图例，密码为自己设置的密码，文件路径在本文第三步中有说到。选择传统打包点击打包。</li>
</ol>
<p><img src="/2022/11/12/%E5%AD%A6%E4%B9%A0-uniapp%E4%B8%ADApp%E5%BC%80%E5%8F%91%E4%BD%BF%E7%94%A8%E9%AB%98%E5%BE%B7SDK%E8%8E%B7%E5%8F%96%E5%AE%9A%E4%BD%8D/image-20221112155740058.png" alt="image-20221112155740058"></p>
<ol start="3">
<li>依次点击 运行-运行到手机或模拟器-运行到Android App基座，选择自定义基座。点击运行即可。</li>
</ol>
<h3 id="补充-关于代码方面"><a href="#补充-关于代码方面" class="headerlink" title="补充-关于代码方面"></a>补充-关于代码方面</h3><p>我用的是<strong>uni.getLocation</strong>来获取位置信息，此api有几个注意事项：</p>
<ol>
<li><p>如果是安卓app开发，type必须为gcj02</p>
</li>
<li><p>geocode参数必须写上，且值为true</p>
</li>
<li><p>success回调中，address便是解析后的位置信息，为数组形式。</p>
</li>
</ol>
]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>uniapp</tag>
</tags>
</entry>
<entry>
<title>学习-uniapp的登录鉴权实现</title>
<url>/2022/11/07/%E5%AD%A6%E4%B9%A0-uniapp%E7%9A%84%E7%99%BB%E5%BD%95%E9%89%B4%E6%9D%83%E5%AE%9E%E7%8E%B0/</url>
<content><![CDATA[<h2 id="理清逻辑"><a href="#理清逻辑" class="headerlink" title="理清逻辑"></a>理清逻辑</h2><p>登录限制的逻辑，简单划分一下就是下面几点：</p>
<ol>
<li>登录成功时set一个token，没登录的话没有token</li>
<li>访问除了tabbar的页面和登录页以外的页面时都要鉴权</li>
<li>鉴权成功继续访问，失败则跳到login<span id="more"></span></li>
</ol>
<p>理清楚后，得出需要get和set两个方法。然后开始封装此函数</p>
<h2 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h2><p>在根目录下新建common文件夹，在其里面新建一个auth.js文件，编写set和getToken方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">TokenKey</span> = <span class="string">'uni_token'</span>;</span><br><span class="line"><span class="comment">// 认证令牌</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getToken</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> uni.<span class="title function_">getStorageSync</span>(<span class="title class_">TokenKey</span>)</span><br><span class="line">}</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">setToken</span>(<span class="params">token</span>) {</span><br><span class="line"> <span class="keyword">return</span> uni.<span class="title function_">setStorageSync</span>(<span class="title class_">TokenKey</span>, token)</span><br><span class="line">} </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">removeToken</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="keyword">return</span> uni.<span class="title function_">removeStorageSync</span>(<span class="title class_">TokenKey</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h2><p>在login的登录逻辑中引入auth文件的setToken方法，用它进行存取token的行为。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {setToken} <span class="keyword">from</span> <span class="string">'../../common/auth.js'</span>;</span><br><span class="line"><span class="comment">//此处省略</span></span><br><span class="line"><span class="keyword">if</span>(<span class="comment">//登录成功的逻辑){</span></span><br><span class="line"> <span class="title function_">setToken</span>(<span class="string">'logined'</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h2><p>在需要登录鉴权才能跳转的页面中，引入auth中的getToken方法（<strong>是get不是set</strong>）进行鉴权。</p>
<p>要把鉴权逻辑写在onLoad钩子中，因为此时页面还渲染出来。</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> {getToken} <span class="keyword">from</span> <span class="string">'../../common/auth.js'</span>;</span><br><span class="line"><span class="title function_">onLoad</span>(<span class="params"></span>){</span><br><span class="line"> <span class="keyword">let</span> token = <span class="title function_">getToken</span>()</span><br><span class="line"> <span class="keyword">if</span> (!token) {</span><br><span class="line"> uni.<span class="title function_">reLaunch</span>({</span><br><span class="line"> <span class="attr">url</span>: <span class="string">"/pages/login/login"</span></span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h2 id="完成！"><a href="#完成！" class="headerlink" title="完成！"></a>完成！</h2>]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>uniapp</tag>
</tags>
</entry>
<entry>
<title>学习-简述Content-Type的用法及编码逻辑</title>
<url>/2022/12/18/%E5%AD%A6%E4%B9%A0-%E7%AE%80%E8%BF%B0Content-Type%E7%9A%84%E7%94%A8%E6%B3%95%E5%8F%8A%E7%BC%96%E7%A0%81%E9%80%BB%E8%BE%91/</url>
<content><![CDATA[<h3 id="x-www-form-urlencoded与multipart-form-data的区别"><a href="#x-www-form-urlencoded与multipart-form-data的区别" class="headerlink" title="x-www-form-urlencoded与multipart/form-data的区别"></a>x-www-form-urlencoded与multipart/form-data的区别</h3><h5 id="一、form表单"><a href="#一、form表单" class="headerlink" title="一、form表单"></a>一、form表单</h5><p>首先，两者都是一种表单的编码格式。在form元素的语法中，enctype表明提交数据的格式，用 enctype属性指定将数据发送到到服务器时浏览器使用的编码类型。</p>
<span id="more"></span>
<h5 id="二、application-x-www-form-urlencoded时-服务器的编码逻辑"><a href="#二、application-x-www-form-urlencoded时-服务器的编码逻辑" class="headerlink" title="二、application/x-www-form-urlencoded时 服务器的编码逻辑"></a>二、application/x-www-form-urlencoded时 服务器的编码逻辑</h5><p> application/x-www-form-urlencoded： 窗体数据被编码为<strong>名称/值对</strong>的时候，这是标准的编码格式。</p>
<ol>
<li>当method为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。</li>
</ol>
<h5 id="三、multipart-form-data时-服务器的编码逻辑"><a href="#三、multipart-form-data时-服务器的编码逻辑" class="headerlink" title="三、multipart/form-data时 服务器的编码逻辑"></a>三、multipart/form-data时 服务器的编码逻辑</h5><p> multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分，<strong>这个一般文件上传时用</strong>。</p>
<ol>
<li><p>当method为<strong>post</strong>时候，浏览器把form数据封装到http body中，然后发送到server。</p>
</li>
<li><p>如果没有type=file的控件，默认用application/x-www-form-urlencoded。</p>
</li>
<li><p>如果有type=file，必须用multipart/form-data。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。</p>
</li>
</ol>
<h5 id="四、Content-Type的使用（牢记）"><a href="#四、Content-Type的使用（牢记）" class="headerlink" title="四、Content-Type的使用（牢记）"></a>四、Content-Type的使用（牢记）</h5><p>客户端发送请求（Request）时的Content-Type设置，特别是使用ajax的时候，如果设置得不准确，很有可能导致请求失败。</p>
<ol>
<li>如果是一个restful接口 （json格式），一般将Content-Type设置为application/json; charset=UTF-8；</li>
<li>如果是文件上传，一般Content-Type设置为multipart/form-data</li>
<li>如果普通表单提交，一般Content-Type设置为application/x-www-form-urlencoded</li>
</ol>
]]></content>
<categories>
<category>学习</category>
</categories>
<tags>
<tag>计算机网络</tag>
</tags>
</entry>
<entry>
<title>日记-尴尬大四</title>
<url>/2022/11/07/%E6%97%A5%E8%AE%B01/</url>
<content><![CDATA[<h2 id="起因"><a href="#起因" class="headerlink" title="起因"></a>起因</h2><p>大三快要暑假的时候有了找实习的想法，但因<strong>太过菜鸡和醒悟得太晚</strong>，导致与好公司的实习机会失之交臂，现在想来还是很后悔。<span id="more"></span>后面去了一个东莞当地的一个小公司实习，在此期间写了挺多代码，也确实学会了一些新东西，虽然现在想来那些东西都是比较基础的，但也算有点收获。</p>
<p>很快就逢开学之日，那时候对自己和行业形式认识不到位，想要all In秋招，觉得自己怎么也能上一个岸。就在开学那个月提了离职，就此便回归痛苦的学校。</p>
<h2 id="结果"><a href="#结果" class="headerlink" title="结果"></a>结果</h2><p>现在是大四上学期，学校课程可以说是很水，所以打算直接去广州找实习。但十月份前后投了六七十份实习简历都没有音讯，紧接着十一月广州爆发疫情，直至今天已经有几千例，且丝毫没有遏制的趋势。这种情况下自然是不敢继续投，因为毕竟还在学校，投了也不好去。后面就出下策：要不试一试东莞的吧，先做着总比在学校上课强，结果在各大招聘软件上一搜，几乎没有几家招实习。</p>
<p><strong>现在就处于没有实习，边去上课边在家学习的尴尬状态。</strong></p>
<h2 id="吐槽"><a href="#吐槽" class="headerlink" title="吐槽"></a>吐槽</h2><p>大四开学后，学校联合校外计算机培训机构开展了一系列的课程，其实说白了就是免费给你上试听课。听到现在，我只能说教的很一般，而且教的十分基础，很多知识之前都讲过。我觉得如果真有学生现在大四了还是他们那个课程的进度，那毕业后找工作十分困难。上学期也有这种课，让我印象最深的无非就是在课程快要结束后，有一个所谓的“讲师”走进班里来，大力输出就业困难和培训班重要的观念，主打一个“<strong>你不来我们班就很难找到工作</strong>”的思想。总之整体下来让我十分反感。</p>
]]></content>
<categories>
<category>日记</category>
</categories>
<tags>
<tag>大学</tag>
<tag>实习</tag>
</tags>
</entry>
</search>