uniapp前端token验证怎么写
时间: 2023-12-23 21:04:56 浏览: 104
实现前端 token 验证的具体步骤如下:
1. 在登录时,服务器返回 token 给前端,前端需要将 token 存储在本地,比如使用 localStorage。同时,每次请求后端接口时,需要将 token 加入请求头中。
```
// 登录成功后返回的 token
localStorage.setItem('token', res.data.token)
// 每次请求时在请求头中添加 token
const token = localStorage.getItem('token')
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
```
2. 在每个需要登录的页面或组件中,需要进行 token 验证。可以通过在路由拦截器中实现,或者在组件的 mounted 生命周期中实现。
```
// 路由拦截器
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.meta.requiresAuth && !token) {
next('/login')
} else {
next()
}
})
// 组件中验证 token
mounted() {
const token = localStorage.getItem('token')
if (!token) {
this.$router.push('/login')
}
}
```
3. 如果 token 失效或过期,需要重新登录获取新的 token。
```
// token 失效或过期时,清除本地 token 并跳转到登录页
localStorage.removeItem('token')
this.$router.push('/login')
```
以上是实现前端 token 验证的基本步骤,具体实现时需要根据自己的业务逻辑进行调整。
阅读全文