javascript - 登录拦截逻辑问题?
问题描述
现在我输入账号密码,浏览器发送请求,成功返回了token;
想问的是:这个token我是放在cookie里好还是localStorage好呢?
还有就是其他页面的登录拦截怎么处理?
是判断cookie或者localStorage里有token就放行吗?(如果是,别人随便造一个token也可以放行了啊)
还有成功的返回的超时时间是怎么用,是放在cookie里面吗?
还是我的思路是错的?
问题解答
回答1:用户认证成功后,服务端返回的 token 值,前端一般存在 localStorage 里。每次发出请求的时候,把该 token 放在请求头即可。下面以 axios为例:
// http request 拦截器api.interceptors.request.use(config => { if (window.localStorage.ACCESS_TOKEN) { config.headers.Authorization = ’Bearer ’ + window.localStorage.ACCESS_TOKEN } return config}, error => { return Promise.reject(error)})// http response 拦截器api.interceptors.response.use(response => { if (response.status === 401) { // token过期 window.localStorage.removeItem(’ACCESS_TOKEN’) router.replace({ path: ’/user/login’, query: {redirect: router.currentRoute.fullPath } }) } return response}, error => { return Promise.reject(error)})
页面的登录拦截以 vue.js 的 vue-router 为例:
// 导航钩子router.beforeEach((to, from, next) => { // 检查登录状态 store.commit(types.CHECKOUT_LOGIN_STATUS) if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限 if (window.localStorage.ACCESS_TOKEN) { // 如果本地存在 access_token,则继续导航 next() } else { if (name === ’userLogin’) {next() } else {next({ // 登录成功后,自动跳转到之前的页面 path: ’/user/login’, query: { redirect: to.fullPath }}) } } } else { next() }})
另外 token 值一般是很难伪造的,因为每次请求都会向后端去验证该 token 值的有效性。
回答2:建议 通过 服务端返回的 request 中 使用 setCookie 的方式进行 token设置,并且设置为 httpOnly,后面的请求中带上cookie,然后根据 server 的回调判断状态。
相关文章:
1. 请在微信客户端打开链接怎么在PC端打开2. html5 - 想要写一个H5页面,就微信打开来那种,然后几个输入框,把数据保存在我后台(java)的数据库里,实现思路是怎样的?3. css3 邊框漸層 及 ios背景模糊?4. 怎么在phpstudy中用phpexcel上传数据到MYSQL?5. boot2docker无法启动6. vue.js - 为什么我的vue项目上传到github不能预览?7. java - AtomicInteger等原子类,是不是不用volatile修饰,自带volatile属性?8. android - 百度地图加载大量marker点有没有比较好的解决方案9. node.js - node中MYSQL的异步问题10. android 百度地图设置个性化皮肤