V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
dapengzhao
V2EX  ›  JavaScript

用 jwt 写单点登录时,子系统已经通过 ajax 拿到了 token,这时需要将 django 的每次请求的请求头中加入 Authorization 这个关键字,是不是我的理解或者思路有问题?

  •  
  •   dapengzhao · 2019-12-17 17:17:31 +08:00 · 3964 次点击
    这是一个创建于 1794 天前的主题,其中的信息可能已经有所发展或是发生改变。
    body['username']=$('#username').val();
    body['password']=$('#password').val();
    $.ajax({
    				url:'http://127.0.0.1:8090/api/api-token-auth/',
    				type:'post',
    				data:body,
                    },
    				success:function (response) {
    				    localStorage.token = response.token
    				},
    				error:function (response) {
    					console.log(response);
    				}
    			})
    

    这里的 response.token 就是请求头中 Authorization 对应的值,好像不太好放到 django 的每次请求头中去?

    第 1 条附言  ·  2019-12-17 21:12:57 +08:00
    网站前后端不分离,也就是点击直接就跳页面了,只有登录的时候会用 ajax 来获取 token,现在的问题时获取到的 token,怎么样加到每次请求的 headers 里面
    17 条回复    2019-12-30 11:43:07 +08:00
    yulang
        1
    yulang  
       2019-12-17 17:41:43 +08:00
    思路没错呀。获得 token 之后在全局的每个 http 请求头都加入 Auth。
    gotonull
        2
    gotonull  
       2019-12-17 17:45:03 +08:00
    django 不是后端吗?请求头加 Authorization 是前端做的事情
    marcong95
        3
    marcong95  
       2019-12-17 17:56:17 +08:00
    你可以自己包装一个$.ajax,自动从 localStorage 之类的地方获取 token 并自动加进去,然后所有请求改成用这个包装好的$.ajax

    或者可以用例如 axios 的请求库的 interceptor 特性
    renmu
        4
    renmu  
       2019-12-17 18:07:28 +08:00 via Android
    可以全局请求添加一个拦截器,然后请求头加一个 auth
    ochatokori
        5
    ochatokori  
       2019-12-17 18:11:09 +08:00 via Android
    楼主全干工程师?
    既然楼主都用了 jq,把需要 token 的接口修改成这段这样子就行了

    ```javascript

    $.ajax({
    url:'xxx',
    headers:{
    Authorization:localStorage.token
    },
    ......(剩下的属性)
    })

    ```
    stillyu
        6
    stillyu  
       2019-12-17 18:38:02 +08:00 via iPhone
    jwt 可以单点登录吗?
    jugelizi
        7
    jugelizi  
       2019-12-17 21:29:06 +08:00   ❤️ 1
    真是前后端不分
    请求头是 js 加啊
    dapengzhao
        8
    dapengzhao  
    OP
       2019-12-18 09:13:41 +08:00
    @yulang 现在的问提就是不知道该怎么全局加 http 请求头,因为 ajax 只有登录的时候用到,其他都是直接跳转
    Jrue0011
        9
    Jrue0011  
       2019-12-18 09:51:35 +08:00
    你的意思是问类似通过<a>标签跳转吗,这种的话应该可以在<a>标签的 href 值中加后端返回的 token 吧
    Jrue0011
        10
    Jrue0011  
       2019-12-18 09:57:06 +08:00
    @Jrue0011。。。想错了,以为是 CSRF 的 token,只是单点登录的话 jwt 的 token 放 cookie 就行了吧
    dapengzhao
        11
    dapengzhao  
    OP
       2019-12-18 10:23:40 +08:00
    @Jrue0011 是啊如果是同域名下的话确实可以这么做,现在既不是同域名也不是前后端分离
    meepo3927
        12
    meepo3927  
       2019-12-18 11:02:16 +08:00
    5 楼的思路是可行的, 我也是这么做的, 目前没什么问题
    dapengzhao
        13
    dapengzhao  
    OP
       2019-12-18 11:08:30 +08:00
    @meepo3927 前后端分离的话确实可以这么做,可现在项目是前后端不分离的。
    encro
        14
    encro  
       2019-12-18 12:45:32 +08:00
    $.ajaxSetup 设置所有 ajax 请求公用参数
    token 存放 sessionStorage,localStorage 还是 cookie 就看你的需要和服务端设计了。
    chennqqi
        15
    chennqqi  
       2019-12-18 13:40:38 +08:00
    interceptor 好一些
    limingjie138
        16
    limingjie138  
       2019-12-18 15:26:59 +08:00
    全干工程师建议你花几天时间学下 Vue,我之前 token 是按照 5 楼写法保存的全局请求头,但是保存在了 sessionStorage 里。但是前端登录判断拦截写起来就太费劲了,总不能每次请求都加一个后端 Token 失效验证吧,ajax 能活活把人写死。
    chnwillliu
        17
    chnwillliu  
       2019-12-30 11:43:07 +08:00
    JWT 适合单页面应用,前端自己管页面路由,有前端路由就会有路由拦截器,在拦截器里做权限和登录判断不会很麻烦的。Ajax 用 axios 也是有 HTTP 拦截器的,像 Angular 更是直接支持 HttpInterceptor,在拦截器里做 token refresh 都可以,实际发请求的逻辑层甚至都不会发觉 token 被 refresh 了( rxjs 大法好)。

    如果是传统的后端吐 HTML 的架构,还是用 Cookie 比较方便,后端控制页面重定向什么的,前端不用关心请求头和页面权限。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1964 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 16:22 · PVG 00:22 · LAX 08:22 · JFK 11:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.