前言
利用了vuex状态管理存储了登录的信息，还加入了token，识别token是否需要授权登录
利用了uni.login，uni.getUserProfile2个方法获取用户的openid和昵称和头像图片地址
前端代码：有5个页面，1个是微信授权登录的页面，1个”我的“页面
1个封装request.js的页面，2个vuex的状态管理的页面，1个是添加了识别有放token的没有登录就自动跳转登录的功能的main.js页面
后端代码：1个数据库连接页面，1个数据库页面封装查询用户与插入用户信息的页面以及生成用户的token，1个调用接口页面
提示：以下是本篇文章正文内容，下面案例可供参考
一、前端代码？
1.微信授权登录的页面（没有样式，自己写）
1. <template> 2. <view @tap='loginOther()'> 3. <button>微信登录</button> 4. </view> 5. </template>
1. import $http from '@/common/api/request.js' 2. import {mapMutations} from 'vuex' 3. export default{ 4. methods:{ 5. ...mapMutations(['login']), 6. //关闭当前页面，返回上一页 7. goBack(){ 8. uni.navigateBack({ 9. delta:1 10. }) 11. }, 12. loginOther(){ 13. uni.login({ 14. success:(resp)=>{ 15. let code=resp.code; 16. this.code=code; 17. } 18. }), 19. uni.getUserProfile({ 20. desc: "获取你的昵称、头像、地区及性别", 21. success: (res) => { 22. let ccode=this.code 23. let nickName = res.userInfo.nickName; 24. let avatarUrl = res.userInfo.avatarUrl; 25. $http.request({ 26. url:"/login", 27. method:"POST", 28. data:{ 29. ccode, 30. nickName, 31. avatarUrl 32. }, 33. }).then((res)=>{ 34. this.login(res); 35. uni.navigateBack({ 36. delta:1 37. }) 38. }).catch(()=>{ 39. uni.showToast({ 40. title:'请求失败', 41. icon:'none' 42. }) 43. }) 44. }, 45. }) 46. } 47. } 48. }
2.”我的“页面
1. <view class='header-logo'> 2. <image class='logo-img' :src=" loginStatus ? userInfo.avatarUrl: '' " mode=""></image> 3. <view class='logo-name'> 4. {{ loginStatus ? userInfo.nickName : "" }} 5. </view> 6. </view>
1. import {mapState} from 'vuex'; 2. export default { 3. computed:{ 4. ...mapState({ 5. loginStatus:state=>state.user.loginStatus, 6. userInfo:state=>state.user.userInfo 7. }) 8. } 9. 10. }
3.封装request.js的页面
1. import store from '@/store/index.js' 2. export default{ 3. common:{ 4. baseUrl:"http://本地ip地址或者你的服务器ip地址或者你服务器的域名:3000/api", 5. data:{}, 6. header:{ 7. "Content-Type":"application/json", 8. "Content-Type":"application/x-www-form-urlencoded" 9. }, 10. method:"GET", 11. dataType:"json" 12. }, 13. request( options={} ){ 14. 15. uni.showLoading({ 16. title: '加载中' 17. }); 18. 19. options.url = this.common.baseUrl + options.url; 20. options.data = options.data || this.common.data; 21. options.header = options.header || this.common.header; 22. options.method = options.method || this.common.method; 23. options.dataType = options.dataType || this.common.dataType; 24. 25. //判断是否传入了header头的token进行用户是否登录的验证 26. if(options.header.token){ 27. options.header.token = store.state.user.token; 28. if(!options.header.token){ 29. uni.showToast({ 30. title:"请先登录", 31. icon:"none" 32. }) 33. return uni.navigateTo({ 34. url:"/pages/login/login" 35. }) 36. } 37. } 38. return new Promise((res,rej)=>{ 39. uni.request({ 40. ...options, 41. success: (result) => { 42. if(result.statusCode != 200){ 43. return rej(); 44. } 45. setTimeout(function () { 46. uni.hideLoading(); 47. }, 500); 48. let data = result.data.data; 49. res(data); 50. } 51. }) 52. }) 53. } 54. }
4.vuex的状态管理的页面
store文件夹i中ndex.js的的文件然后调用user.js这个模块
1. import Vue from 'vue' 2. import Vuex from 'vuex' 3. 4. Vue.use(Vuex); 5. //用户 6. import user from './modules/user.js' 7. export default new Vuex.Store({ 8. modules:{ 9. user, 10. } 11. })
1. export default{ 2. state:{ 3. //登录状态 4. loginStatus:false, 5. //token 6. token:null, 7. //用户信息(昵称/头像) 8. userInfo:{} 9. }, 10. getters:{}, 11. mutations:{ 12. //一旦进入了app,就需要执行这个方法,把用户信息读出来 13. initUser(state){ 14. let userInfo = uni.getStorageSync('userInfo'); 15. if( userInfo ){ 16. userInfo = JSON.parse( userInfo ); 17. state.userInfo = userInfo; 18. state.loginStatus = true; 19. state.token = userInfo.token; 20. } 21. }, 22. //登录后保存用户信息 23. login(state,userInfo){ 24. state.userInfo = userInfo; 25. state.loginStatus = true; 26. state.token = userInfo.token; 27. //持久化存储 ===>把对象转换成字符串 28. uni.setStorageSync('userInfo',JSON.stringify(userInfo)); 29. }, 30. //退出登录 31. loginOut(state){ 32. state.loginStatus = false; 33. state.userInfo = {}; 34. state.token = null; 35. //删除本地存储的信息 36. uni.removeStorageSync('userInfo'); 37. } 38. }, 39. actions:{} 40. }
5.添加了识别有放token的没有登录就自动跳转登录的功能的main.js页面
1. import Vue from 'vue' 2. import App from './App' 3. 4. Vue.config.productionTip = false 5. 6. import store from 'store' 7. Vue.prototype.$store = store; 8. 9. //权限跳转 10. Vue.prototype.navigateTo = (options)=>{ 11. if( !store.state.user.loginStatus ){ 12. uni.showToast({ 13. title:"请先登录", 14. icon:"none" 15. }) 16. return uni.navigateTo({ 17. url:"/pages/login/login" 18. }) 19. } 20. uni.redirectTo(options) 21. } 22. 23. App.mpType = 'app' 24. 25. const app = new Vue({ 26. store, 27. ...App 28. }) 29. app.$mount()
二、后端代码
1.数据库连接页面(sql.js)
1. var mysql = require('mysql');//引入 2. var connection = mysql.createConnection({ 3. host : 'localhost或者你的服务器公网地址', 4. user : '用户名', 5. password : '自己的数据库密码', 6. database : '数据库名称' 7. }); 8. module.exports = connection;//抛出
2.数据库页面封装查询用户与插入用户信息的页面以及生成用户的token（UserSql.js）
1. var User = { 2. //查询用户名 3. queryUserName( param ){ 4. if( param.openid){ 5. //phone = 应该是手机号这个变量[属性],为了后面好操作所有名称改为:userName 6. return "select * from wechatuser where openid = '"+param.openid+"' or nickName = '"+param.nickName+"' "; 7. } 8. }, 9. 10. //增加一条用户数据 11. insertData( param ){ 12. let openid = param.openid; 13. const jwt = require('jsonwebtoken'); 14. let payload = {name:openid}; //openid 15. let secret = '自己编一个口令比如“mysql”';//口令 16. let token = jwt.sign(payload,secret);//拼接token 17. let nickName = param.nickName; 18. let avatarUrl = param.avatarUrl ; 19. return 'insert into wechatuser (openid,nickName,avatarUrl,token) values ("'+openid+'","'+nickName+'","'+avatarUrl+'","'+token+'")'; 20. } 21. } 22. 23. exports = module.exports = User;
3.调用接口页面(sever下面的router下面的index.js)
1. var express = require('express'); 2. var router = express.Router(); 3. var connection = require('../db/sql.js'); 4. var user = require('../db/UserSql.js'); 5. var jwt_decode = require('jwt-decode'); 6. const request = require('request') 7. router.post('/api/login', function(req, res, next) { 8. let code=req.body.ccode;//登陆传过来的code 9. let nickName=req.body.nickName; 10. let avatarUrl=req.body.avatarUrl; 11. let appid = "自己小程序后台管理的appid"; //自己小程序后台管理的appid，可登录小程序后台查看 12. let mysecret = "小程序后台管理的secret"; //小程序后台管理的secret，可登录小程序后台查看 13. let grant_type = "authorization_code"; // 授权（必填）默认值 14. //拼接出请求微信服务器的url地址然后请求oppenid和session_key 15. let url ='https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + mysecret + '&js_code=' + code + '&grant_type=authorization_code'; 16. request(url,(error, response, body)=>{ 17. //JSON.parse()方法将JSON格式字符串转换为js对象 18. let parsData = JSON.parse(body.toString()); 19. let openid=parsData.openid; 20. let session_key=parsData.session_key; 21. let params={ 22. openid, 23. nickName, 24. avatarUrl 25. } 26. //查询数据库中有没有此用户 27. connection.query( user.queryUserName( params ) , function (error, results, fields) { 28. if( results.length > 0){ 29. //数据库中存在 : 读取 30. connection.query( user.queryUserName( params ) , function (e, r) { 31. 32. res.send({ 33. data:r[0] 34. 35. }) 36. }) 37. }else{ 38. //数据库中[不]存在 : 存储 ==>读取 39. connection.query( user.insertData( params ) , function (er, result) { 40. connection.query( user.queryUserName( params ) , function (e, r) { 41. res.send({ 42. data:r[0] 43. }) 44. }) 45. }) 46. } 47. }) 48. }) 49. })
总结
当你想要设置一个页面想要使用必须先登录就在那个页面的接口请求中加入token比如
1. $http.request({ 2. url:"/selectCart", 3. method:"POST", 4. 5. header:{ 6. token:true 7. } 8. 9. }).then((res)=>{ 10. this.initGetData(res); 11. }).catch(()=>{ 12. uni.showToast({ 13. title:'请求失败', 14. icon:'none' 15. }) 16. })
