@shixinde/vuepress-theme-init
Version:
134 lines (133 loc) • 38.8 kB
JavaScript
import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},e=p(`<h1 id="登录" tabindex="-1"><a class="header-anchor" href="#登录"><span>登录</span></a></h1><h2 id="路由守卫" tabindex="-1"><a class="header-anchor" href="#路由守卫"><span>路由守卫</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line">router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token doc-comment comment">/**</span>
<span class="line"> * 根据token判断用户是否登录</span>
<span class="line"> * 如果有token, 则允许访问</span>
<span class="line"> * 如果没有token, 则跳转到登录页面</span>
<span class="line"> */</span></span>
<span class="line"> <span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">useUserStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>store<span class="token punctuation">.</span>user<span class="token punctuation">.</span>token <span class="token operator">&&</span> <span class="token operator">!</span><span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token string">'/other'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token string">'/login'</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="设置请求拦截器和访问拦截器" tabindex="-1"><a class="header-anchor" href="#设置请求拦截器和访问拦截器"><span>设置请求拦截器和访问拦截器</span></a></h2><blockquote><p>通过设置默认请求头，来进行token的获取 <code>axios.defaults.headers['Authorization'] = 'Basic XXXX'.</code></p><p>获得<code>token</code>后，将<code>token</code>保存在<code>Cookies</code>和<code>VueX</code>中.</p><p>在请求拦截器加入如下判断：如果<code>Cookies</code>里面有数据，那么重复赋值请求头,</p><p>将<code>Cookies</code>中的<code>token</code>放在请求头的后面<code> config.headers['Authorization'] = 'Bearer ' + getToken()</code></p></blockquote><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> Notification<span class="token punctuation">,</span> MessageBox<span class="token punctuation">,</span> Message <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'element-ui'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> getToken <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span></span>
<span class="line"><span class="token keyword">import</span> errorCode <span class="token keyword">from</span> <span class="token string">'@/utils/errorCode'</span></span>
<span class="line">axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Authorization'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Basic enRfaHpfZGVtbzpxMWNVTk5wNjV2WjlQODJDR1ZadU92d2lZZVlnQ0t2Z3Z6OFpLWHlI'</span></span>
<span class="line"><span class="token comment">// 创建axios实例</span></span>
<span class="line"><span class="token keyword">const</span> service <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// axios中请求配置有baseURL选项，表示请求URL公共部分</span></span>
<span class="line"> <span class="token literal-property property">baseURL</span><span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">VUE_APP_BASE_API</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token comment">// 超时</span></span>
<span class="line"> <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">30000</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">// request拦截器</span></span>
<span class="line">service<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">config</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'config'</span><span class="token punctuation">,</span> config<span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">// 是否需要设置 token</span></span>
<span class="line"> <span class="token keyword">const</span> isToken <span class="token operator">=</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>headers <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>isToken <span class="token operator">===</span> <span class="token boolean">false</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&&</span> <span class="token operator">!</span>isToken<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> config<span class="token punctuation">.</span>headers<span class="token punctuation">[</span><span class="token string">'Authorization'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 让每个请求携带自定义token 请根据实际情况自行修改</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// get请求映射params参数</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>config<span class="token punctuation">.</span>method <span class="token operator">===</span> <span class="token string">'get'</span> <span class="token operator">&&</span> config<span class="token punctuation">.</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> url <span class="token operator">=</span> config<span class="token punctuation">.</span>url <span class="token operator">+</span> <span class="token string">'?'</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> propName <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>config<span class="token punctuation">.</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> value <span class="token operator">=</span> config<span class="token punctuation">.</span>params<span class="token punctuation">[</span>propName<span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">var</span> part <span class="token operator">=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>propName<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"="</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">!==</span> <span class="token keyword">null</span> <span class="token operator">&&</span> <span class="token keyword">typeof</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">of</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">let</span> params <span class="token operator">=</span> propName <span class="token operator">+</span> <span class="token string">'['</span> <span class="token operator">+</span> key <span class="token operator">+</span> <span class="token string">']'</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">var</span> subPart <span class="token operator">=</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"="</span><span class="token punctuation">;</span></span>
<span class="line"> url <span class="token operator">+=</span> subPart <span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>value<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"&"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> url <span class="token operator">+=</span> part <span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"&"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> url <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> config<span class="token punctuation">.</span>params <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"> config<span class="token punctuation">.</span>url <span class="token operator">=</span> url<span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token keyword">return</span> config</span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span></span>
<span class="line"> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 响应拦截器</span></span>
<span class="line">service<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 未设置状态码则默认成功状态</span></span>
<span class="line"> <span class="token keyword">const</span> code <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>code <span class="token operator">||</span> <span class="token number">200</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 获取错误信息</span></span>
<span class="line"> <span class="token keyword">const</span> msg <span class="token operator">=</span> errorCode<span class="token punctuation">[</span>code<span class="token punctuation">]</span> <span class="token operator">||</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>msg <span class="token operator">||</span> errorCode<span class="token punctuation">[</span><span class="token string">'default'</span><span class="token punctuation">]</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">===</span> <span class="token number">401</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> MessageBox<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'登录状态已过期，您可以继续留在该页面，或者重新登录'</span><span class="token punctuation">,</span> <span class="token string">'系统提示'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">confirmButtonText</span><span class="token operator">:</span> <span class="token string">'重新登录'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">cancelButtonText</span><span class="token operator">:</span> <span class="token string">'取消'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'warning'</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'重新登录'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token comment">// 解释一下下面这段代码</span></span>
<span class="line"> <span class="token comment">// 1. 退出登录</span></span>
<span class="line"> <span class="token comment">// 2. 跳转到登录页面</span></span>
<span class="line"> <span class="token comment">// 3. 重新加载页面</span></span>
<span class="line"> <span class="token comment">// })</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">===</span> <span class="token number">500</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">message</span><span class="token operator">:</span> msg<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'error'</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'500 Error Msg:'</span> <span class="token operator">+</span> msg<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>msg<span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>code <span class="token operator">!==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> Notification<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">title</span><span class="token operator">:</span> msg</span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'200 Error Msg:'</span> <span class="token operator">+</span> msg<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> res<span class="token punctuation">.</span>data</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'err'</span> <span class="token operator">+</span> error<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">let</span> <span class="token punctuation">{</span> message <span class="token punctuation">}</span> <span class="token operator">=</span> error<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>message <span class="token operator">==</span> <span class="token string">"Network Error"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> message <span class="token operator">=</span> <span class="token string">"后端接口连接异常"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"timeout"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> message <span class="token operator">=</span> <span class="token string">"系统接口请求超时"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"Request failed with status code"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> message <span class="token operator">=</span> <span class="token string">"系统接口"</span> <span class="token operator">+</span> message<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span>message<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">"异常"</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token function">Message</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">message</span><span class="token operator">:</span> message<span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'error'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> service</span>
<span class="line"></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="获取token" tabindex="-1"><a class="header-anchor" href="#获取token"><span>获取token</span></a></h2><h2 id="将token保存到cookies-中和vuex中" tabindex="-1"><a class="header-anchor" href="#将token保存到cookies-中和vuex中"><span>将token保存到Cookies 中和VueX中</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> Cookies <span class="token keyword">from</span> <span class="token string">'js-cookie'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> TokenKey <span class="token operator">=</span> <span class="token string">'Admin-Token'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">setToken</span><span class="token punctuation">(</span><span class="token parameter">token</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">,</span> token<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">removeToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> Cookies<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>TokenKey<span class="token punctuation">)</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,9),o=[e];function c(l,i){return a(),s("div",null,o)}const r=n(t,[["render",c],["__file","登录逻辑.html.vue"]]),k=JSON.parse(`{"path":"/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E7%99%BB%E5%BD%95%E9%80%BB%E8%BE%91.html","title":"登录逻辑","lang":"zh-CN","frontmatter":{"title":"登录逻辑","date":"2023-09-25T00:00:00.000Z","tags":["笔记","登录"],"categories":["飞码篇"]},"headers":[{"level":2,"title":"路由守卫","slug":"路由守卫","link":"#路由守卫","children":[]},{"level":2,"title":"设置请求拦截器和访问拦截器","slug":"设置请求拦截器和访问拦截器","link":"#设置请求拦截器和访问拦截器","children":[]},{"level":2,"title":"获取token","slug":"获取token","link":"#获取token","children":[]},{"level":2,"title":"将token保存到Cookies 中和VueX中","slug":"将token保存到cookies-中和vuex中","link":"#将token保存到cookies-中和vuex中","children":[]}],"git":{"updatedTime":1727229103000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"常用笔记/登录逻辑.md","excerpt":"\\n<h2>路由守卫</h2>\\n<div class=\\"language-javascript\\" data-highlighter=\\"prismjs\\" data-ext=\\"js\\" data-title=\\"js\\"><pre class=\\"language-javascript\\"><code><span class=\\"line\\">router<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">beforeEach</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">(</span><span class=\\"token parameter\\">to<span class=\\"token punctuation\\">,</span> from<span class=\\"token punctuation\\">,</span> next</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">=></span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token doc-comment comment\\">/**</span>\\n<span class=\\"line\\"> * 根据token判断用户是否登录</span>\\n<span class=\\"line\\"> * 如果有token, 则允许访问</span>\\n<span class=\\"line\\"> * 如果没有token, 则跳转到登录页面</span>\\n<span class=\\"line\\"> */</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">const</span> store <span class=\\"token operator\\">=</span> <span class=\\"token function\\">useUserStore</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">if</span> <span class=\\"token punctuation\\">(</span><span class=\\"token operator\\">!</span>store<span class=\\"token punctuation\\">.</span>user<span class=\\"token punctuation\\">.</span>token <span class=\\"token operator\\">&&</span> <span class=\\"token operator\\">!</span><span class=\\"token punctuation\\">[</span><span class=\\"token string\\">'/login'</span><span class=\\"token punctuation\\">,</span> <span class=\\"token string\\">'/other'</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">includes</span><span class=\\"token punctuation\\">(</span>to<span class=\\"token punctuation\\">.</span>path<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">)</span> <span class=\\"token keyword\\">return</span> <span class=\\"token string\\">'/login'</span></span>\\n<span class=\\"line\\"><span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{r as comp,k as data};