保存用户登录状态token，以及退出清除登录状态（node/后端设置token返回实现完整流程） |
您所在的位置：网站首页 › 微信小程序一直保持登录状态 › 保存用户登录状态token，以及退出清除登录状态（node/后端设置token返回实现完整流程） |
保存用户登录状态token，以及退出清除登录状态（node/后端设置token返回实现完整流程）
|
token是一个用户信息的表示，在登录中将会从后端拿到token，然后用户才可以进行往后的一系列操作，比如会员，用户个人信息，数据记录等等都可以根据token拿到，而每次访问token接口又会造成没必要的请求，这时候就是下面将登录时的token保存在vuex中， 一. 利用vuex中store进行进行保存代码如下 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {//状态从本地获取 token: localStorage.getItem("token") || '' }, //同步修改state里面的值 mutations: { //包含更新多个state函数的对象 SET_TOKEN:(state, token)=>{ state.token = token } }, //异步调用mutations里面的方法 //contxt.commit 利用上下文触发mutations某个方法 // vue代码里面 this.$store.dispatch触发action里面的定义的方法 actions: { //包含多个对应事件回调函数的对象 //context是对应上下文 setToken(context,token){ context.commit('SET_TOKEN',token) }, //退出登录时清除token clearToken(context){ context.commit('SET_TOKEN','') } }, // getters包含多个getter计算属性函数的对象 modules: { } }) 二.在登录页面在登录成功后后端返回code=0，以及data也就是用户的登录状态码，然后我们将其data保存到vuex中。1）后端传回数据如下图 在这里我们就实现了token用户登录状态保存的步骤，下面我们利用向后端传token来获取用户信息并展示 三.在登录成功进入个人中心页面时，进行传token来同步获取用户信息， 1）此时需要在个人中心页面携带token向后端接口发送请求 //用户信息接口 export const getUserInfo = (token)=>axios.get("/api/v1/pri/user/find_by_token",{ params:{//请求头携带token传参，来获取后端对应用户信息（头像，名字等） "token":token } })2）在个人信息页面展示信息，并且有退出登录按钮进行退出 {{ info.name }} 退出登录 import { getUserInfo } from "@/api/getData.js"; export default { data() { return { info: {}, }; }, //computed会有缓存功能，强调于属性的获取 computed: { //从vuex中获取token getToken() { return this.$store.state.token; }, }, methods: { //获取用户信息 async getInfo() { try { const result = await getUserInfo(this.getToken); if (result.data.code === 0) { this.info = result.data.data; } } catch (error) { console.log(error); } }, //退出登录 async signOut() { this.$createDialog({ type: "confirm", title: "确认退出吗?", confirmBtn: { text: "确定按钮", active: true, disabled: false, href: "javascript:;", }, cancelBtn: { text: "取消按钮", active: false, disabled: false, href: "javascript:;", }, onConfirm: () => { this.$createToast({ type: "warn", time: 1000, txt: "退出成功", }).show( this.$store.dispatch("clearToken"), //清除token localStorage.removeItem("token"), //刷新页面 location.reload() ); }, }).show(); }, }, mounted() { if (this.getToken) { this.getInfo(); } }, };到这里登录保存token以及退出清除token就实现了，在其他需要token的组件中只需要继续获取到vuex的token就可以获取到用户的信息了 四，这里加一个前端使用node实现token传给前端的方式 首先安装jsonwebtoken,用来生成token npm install [email protected]-在登录路由接口文件中使用将加密好的token返回给客户端 var express = require('express'); var router = express.Router(); const jwt = require('jsonwebtoken') //引入 let token const salt = '@!$!@#%#@$#$@' //设置token加密密钥 // 登录接口 router.post('/login', function (req, res) { (async function () { console.log(req.body); // 获取参数 const { username, password } = req.body connection.query(`SELECT * FROM user where username='${username}'`, function (error, results, fields) { if (error) throw error; // 返回值 console.log("返回用户信息", results); // 如果数据库没有该用户 if (results.length msg: '用户名未注册' }) return } // 如果有，判断数据库参数与当前参数是否一致 if (results[0].username !== username || results[0].password !== password) { res.send({ msg: '用户名或密码错误' }) return } if (results.length > 0) { // 设置token,调用jsonwebtoken包提供的**sign()**方法，将用户的信息加密成JWT字符串，响应给客户端 token = jwt.sign({ id: results[0].id, }, salt, { expiresIn: 100000 * 60 * 60 * 24 }) req.headers['token'] = token let asd = { code: 0, msg: '登陆成功', token, data: results[0] } res.send(asd); } }); } )() });这样客户端就可以按照上面所讲的方式保存token并且实现长久登录啦!!! 既然讲到了express，那就把后端token校验也放在下面，用来校验客户端传递给接口的token。在目录下新建utils文件夹->token.js文件 token.js（用来接收前端发送请求时是否携带token，如果没有提示错误）
const jwt = require('jsonwebtoken')
const salt = '@!$!@#%#@$#$@' //加密
module.exports = function (req, res, next) {
// 检查post的信息或者url查询参数或者头信息
const token = req.body.token || req.query.token || req.headers['token']
console.log(token,'asd');
if (token) {
// 解析token
jwt.verify(token, salt, (err, decoded) => {
if (err) {
return res.send({
code: 1,
msg: 'token信息错误'
})
} else {
// 如果没问题九八解码后得信息保存到请求中，供后面使用
req.api_user = decoded
next()
}
})
} else {
// 如果没有token，返回错误信息
res.send({
code: 1,
msg: '无效token'
})
}
}
然后在app.js引入，并给对应路由添加token校验 app.js文件
var usersRouter = require('./routes/users');//我的一个用户路由
const need_token = require('./utils/token') //引入
app.use(need_token, usersRouter);//给用户路由接口处添加token校验使用
这样一个前后端token完整的传递方式及实现就全部完成了，小伙伴快去c+v！！！ |
2）我们在登录的请求方法中写如下代码【本文地址】
今日新闻 |
推荐新闻 |