在写web项目时后端写好接口前端想要调用后端接口时除了登录注册页面所有的请求都需要携带authorization这样是为了避免随意通过接口调取数据的现象发生。

这是写web项目时最基础的点但是也挺麻烦的涉及前后端好几个地方的编码经常忘记怎么写的现在记录一下。

总体流程如下

后端使用中间件开启接口请求验证除登录/注册外所有接口的请求都需要携带验证参数才能正确发起请求前端登录时存储验证消息也就是token请求拦截器中设置请求头写入authorization

大体就这么几个步骤下面细化

我是用node写的后端请求验证写在后端入口程序app.js中完整代码如下

const

fs.createWriteStream(./access.log,

flags:

}));app.use(cors());app.use(express.urlencoded({

extended:

app.use(express.static(./public));//

app.use((req,

jwtconfig.jwtSecretKey,algorithms:

);const

require(./router/department_msg)

app.use(/api/dm,

res.cc(err.details[0].message);

else

jwtconfig.jwtSecretKey,algorithms:

);其实这个写法相对来说是固定的首先导入自己写好的jwt验证规则也叫秘钥其实就是一个jwtSecretKey./jwt_config目录下的index.js文件如下

module.exports

}然后导入express-jwt接下来就是使用中间件来设定接口路由规则了unless方法里面写的是排除的接口地址是用正则表达式来排除的/^\/api\/user\/.*$/这个正则表达式的意思是排除所有以/api/user/开头的接口

userManagerRouter);这里以/api/user/开头的接口都是给用户登录和注册相关的接口

二、登录存储token

这里有两种存储方式一种是把token存储在localstorage中另外一种是存储在全局数据管理工具中也就是vuex或者pinia中这里设计前后端联调

1、后端写登录接口向前端传递token

bcrypt.compareSync(userInfo.password,results[0].password);if

(!compareResult)

})这里其实很简单就是后端通过秘钥生成一个有效期为10小时的token这里的秘钥也是上面提到的然后向前端发送这个token

2、前端登录时存储token

}loginFormRef.value.validate(async

valid

console.log(userStore.userInfo)if

return

console.log(userStore.vue3ManageUserInfo)router.push(/)//

catch

{ElMessage.error(用户名或密码错误)console.log(error)}}

else

}上面这段代码不是完整的loginCB是登录按钮的回调函数从回调中看到其实我的登录是写在pinia的getUserInfo方法中的继续看看这个store中的写法

import

console.log(res);userInfo.value

{account:

res.results.department,identity:

登录日志await

console.log(userInfo.value)};//

修改头像const

{userInfo,getUserInfo,clearUserInfo,changeAvatar,changeName,};},{persist:

true,}

);pinia中我用的是组合式api的写法其实也是比较流行的写法逻辑和语法都比较清楚

可以看到我定义了一个userInfo的state登录需要调用loginAPI这个接口对应后端的login函数请求到数据后将接口返回的token写入到userInfo.token中这样全局数据管理store中就存储了一个包含token的名为userInfo的state真的绕。

。

。

注意组合式api需要将state

true,}上面这个是持久化存储我在“vue3pinia用户信息持久缓存token)的问题”这篇博客中有记录目的是将userInfo存储到localstorage中

三、请求拦截器中携带token

使用axios发起接口请求对axios进行二次封装封装代码如下

import

http.interceptors.request.use((config)

{const

http.interceptors.response.use((res)

res.data,(e)

{ElMessage.warning(接口响应出错);console.log(e);return

Promise.reject(e);}

http;注意看请求拦截器中的代码用到了刚刚上面提到的pinia中的userInfo这个state首先获取userInfo中的token判断是否存在token存在的话就把它写到请求头中去关键的代码就是下面这行

token;

这样每次向后端发起数据请求的时候都会携带这个token了除了登录和注册因为不存在后端的中间件也能通过验证了