提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
文章目錄
目錄
文章目錄
前言
一、前端代碼？
1.微信授權(quán)登錄的頁(yè)面（沒(méi)有樣式，自己寫(xiě)）
2.”我的“頁(yè)面
3.封裝request.js的頁(yè)面
4.vuex的狀態(tài)管理的頁(yè)面
5.添加了識(shí)別有放token的沒(méi)有登錄就自動(dòng)跳轉(zhuǎn)登錄的功能的main.js頁(yè)面
二、后端代碼
1.數(shù)據(jù)庫(kù)連接頁(yè)面(sql.js)
2.數(shù)據(jù)庫(kù)頁(yè)面封裝查詢用戶與插入用戶信息的頁(yè)面以及生成用戶的token（UserSql.js）
3.調(diào)用接口頁(yè)面(sever下面的router下面的index.js)
總結(jié)
前言
利用了vuex狀態(tài)管理存儲(chǔ)了登錄的信息，還加入了token，識(shí)別token是否需要授權(quán)登錄
利用了uni.login，uni.getUserProfile2個(gè)方法獲取用戶的openid和昵稱和頭像圖片地址
前端代碼：有5個(gè)頁(yè)面，1個(gè)是微信授權(quán)登錄的頁(yè)面，1個(gè)”我的“頁(yè)面
1個(gè)封裝request.js的頁(yè)面，2個(gè)vuex的狀態(tài)管理的頁(yè)面，1個(gè)是添加了識(shí)別有放token的沒(méi)有登錄就自動(dòng)跳轉(zhuǎn)登錄的功能的main.js頁(yè)面
后端代碼：1個(gè)數(shù)據(jù)庫(kù)連接頁(yè)面，1個(gè)數(shù)據(jù)庫(kù)頁(yè)面封裝查詢用戶與插入用戶信息的頁(yè)面以及生成用戶的token，1個(gè)調(diào)用接口頁(yè)面
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、前端代碼？
1.微信授權(quán)登錄的頁(yè)面（沒(méi)有樣式，自己寫(xiě)）
<template>
?? ??? ??? ?<view ?@tap='loginOther()'>
?? ??? ??? ??? ?<button>微信登錄</button>
?? ??? ??? ?</view>
</template>import $http from '@/common/api/request.js'
import {mapMutations} from 'vuex'
export default{
?? ?methods:{
? ? ...mapMutations(['login']),
? ? //關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)
? ? goBack(){
? ? ?? ?uni.navigateBack({
? ? ?? ??? ?delta:1
? ? ?? ?})
? ? },
?? ??? ?loginOther(){
?? ??? ??? ?uni.login({
?? ??? ??? ??? ?success:(resp)=>{
? ? ? ? ? let code=resp.code;
? ? ? ? ? this.code=code;
?? ??? ??? ??? ?}
?? ??? ??? ?}),
? ? ? uni.getUserProfile({
? ? ? ?? ??? ??? ??? ??? ?desc: "獲取你的昵稱、頭像、地區(qū)及性別",
? ? ? ?? ??? ??? ??? ??? ?success: (res) => {
? ? ? ? ? ? ? ? ? ?let ccode=this.code
? ? ? ? ? ? ? ? ? ?let nickName = res.userInfo.nickName;
? ? ? ? ? ? ? ? ? ?let avatarUrl = res.userInfo.avatarUrl;
? ? ? ? ? ? ? ? ? ?$http.request({
? ? ? ? ? ? ? ? ? ??? ?url:"/login",
? ? ? ? ? ? ? ? ? ??? ?method:"POST",
? ? ? ? ? ? ? ? ? ??? ?data:{
? ? ? ? ? ? ? ? ? ? ? ?ccode,
? ? ? ? ? ? ? ? ? ? ? ?nickName,
? ? ? ? ? ? ? ? ? ? ? ?avatarUrl
? ? ? ? ? ? ? ? ? ??? ?},
? ? ? ? ? ? ? ? ? ?}).then((res)=>{
? ? ? ? ? ? ? ? ? ? ?this.login(res);
? ? ? ? ? ? ? ? ? ? ?uni.navigateBack({
? ? ? ? ? ? ? ? ? ? ??? ?delta:1
? ? ? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ? ?}).catch(()=>{
? ? ? ? ? ? ? ? ? ??? ?uni.showToast({
? ? ? ? ? ? ? ? ? ??? ??? ?title:'請(qǐng)求失敗',
? ? ? ? ? ? ? ? ? ??? ??? ?icon:'none'
? ? ? ? ? ? ? ? ? ??? ?})
? ? ? ? ? ? ? ? ? ?})
? ? ? ?? ??? ??? ??? ??? ?},
? ? ? ?? ??? ??? ??? ?})
?? ??? ?}
?? ?}
}2.”我的“頁(yè)面
?? ??? ??? ??? ?<view class='header-logo'>
?? ??? ??? ??? ??? ?<image class='logo-img' :src=" loginStatus ? userInfo.avatarUrl: '' " mode=""></image>
?? ??? ??? ??? ??? ?<view class='logo-name'>
?? ??? ??? ??? ??? ??? ?{{ ?loginStatus ? userInfo.nickName : "" ? }}
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ?</view> import {mapState} from 'vuex';
export default {
computed:{
...mapState({
loginStatus:state=>state.user.loginStatus,
userInfo:state=>state.user.userInfo
})
}
}3.封裝request.js的頁(yè)面
import store from '@/store/index.js'
export default{
common:{
baseUrl:"http://本地ip地址或者你的服務(wù)器ip地址或者你服務(wù)器的域名:3000/api",
data:{},
header:{
"Content-Type":"application/json",
"Content-Type":"application/x-www-form-urlencoded"
},
method:"GET",
dataType:"json"
},
request( options={} ){
uni.showLoading({
title: '加載中'
});
options.url = this.common.baseUrl + options.url;
options.data = options.data || this.common.data;
options.header = options.header || this.common.header;
options.method = options.method || this.common.method;
options.dataType = options.dataType || this.common.dataType;
//判斷是否傳入了header頭的token進(jìn)行用戶是否登錄的驗(yàn)證
if(options.header.token){
options.header.token = store.state.user.token;
if(!options.header.token){
uni.showToast({
title:"請(qǐng)先登錄",
icon:"none"
})
return uni.navigateTo({
url:"/pages/login/login"
})
}
}
return new Promise((res,rej)=>{
uni.request({
...options,
success: (result) => {
if(result.statusCode != 200){
return rej();
}
setTimeout(function () {
uni.hideLoading();
}, 500);
let data = result.data.data;
res(data);
}
})
})
}
}4.vuex的狀態(tài)管理的頁(yè)面
store文件夾i中ndex.js的的文件然后調(diào)用user.js這個(gè)模塊
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//用戶
import user from './modules/user.js'
export default new Vuex.Store({
?? ?modules:{
?? ??? ?user,
?? ?}
})export default{
?? ?state:{
?? ??? ?//登錄狀態(tài)
?? ??? ?loginStatus:false,
?? ??? ?//token
?? ??? ?token:null,
?? ??? ?//用戶信息(昵稱/頭像)
?? ??? ?userInfo:{}
?? ?},
?? ?getters:{},
?? ?mutations:{
?? ??? ?//一旦進(jìn)入了app,就需要執(zhí)行這個(gè)方法,把用戶信息讀出來(lái)
?? ??? ?initUser(state){
?? ??? ??? ?let userInfo = uni.getStorageSync('userInfo');
?? ??? ??? ?if( userInfo ){
?? ??? ??? ??? ?userInfo = JSON.parse( userInfo );
?? ??? ??? ??? ?state.userInfo = userInfo;
?? ??? ??? ??? ?state.loginStatus = true;
?? ??? ??? ??? ?state.token = userInfo.token;
?? ??? ??? ?}
?? ??? ?},
?? ??? ?//登錄后保存用戶信息
?? ??? ?login(state,userInfo){
?? ??? ??? ?state.userInfo = userInfo;
?? ??? ??? ?state.loginStatus = true;
?? ??? ??? ?state.token = userInfo.token;
?? ??? ??? ?//持久化存儲(chǔ) ===>把對(duì)象轉(zhuǎn)換成字符串
?? ??? ??? ?uni.setStorageSync('userInfo',JSON.stringify(userInfo));
?? ??? ?},
?? ??? ?//退出登錄
?? ??? ?loginOut(state){
?? ??? ??? ?state.loginStatus = false;
?? ??? ??? ?state.userInfo = {};
?? ??? ??? ?state.token = null;
?? ??? ??? ?//刪除本地存儲(chǔ)的信息
?? ??? ??? ?uni.removeStorageSync('userInfo');
?? ??? ?}
?? ?},
?? ?actions:{}
}5.添加了識(shí)別有放token的沒(méi)有登錄就自動(dòng)跳轉(zhuǎn)登錄的功能的main.js頁(yè)面
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
import store from 'store'
Vue.prototype.$store = store;
//權(quán)限跳轉(zhuǎn)
Vue.prototype.navigateTo = (options)=>{
if( !store.state.user.loginStatus ){
uni.showToast({
title:"請(qǐng)先登錄",
icon:"none"
})
return uni.navigateTo({
url:"/pages/login/login"
})
}
uni.redirectTo(options)
}
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
二、后端代碼
1.數(shù)據(jù)庫(kù)連接頁(yè)面(sql.js)
var mysql = require('mysql');//引入
var connection = mysql.createConnection({
host : 'localhost或者你的服務(wù)器公網(wǎng)地址',
user : '用戶名',
password : '自己的數(shù)據(jù)庫(kù)密碼',
database : '數(shù)據(jù)庫(kù)名稱'
});
module.exports = connection;//拋出
2.數(shù)據(jù)庫(kù)頁(yè)面封裝查詢用戶與插入用戶信息的頁(yè)面以及生成用戶的token（UserSql.js）
var User = {
//查詢用戶名
queryUserName( param ){
if( param.openid){
//phone = 應(yīng)該是手機(jī)號(hào)這個(gè)變量[屬性],為了后面好操作所有名稱改為:userName
return "select * from wechatuser where openid = '"+param.openid+"' or nickName = '"+param.nickName+"' ";
}
},
//增加一條用戶數(shù)據(jù)
insertData( param ){
let openid = param.openid;
const jwt = require('jsonwebtoken');
let payload = {name:openid}; //openid
let secret = '自己編一個(gè)口令比如“mysql”';//口令
let token = jwt.sign(payload,secret);//拼接token
let nickName = param.nickName;
let avatarUrl = param.avatarUrl ;
return 'insert into wechatuser (openid,nickName,avatarUrl,token) values ("'+openid+'","'+nickName+'","'+avatarUrl+'","'+token+'")';
}
}
exports = module.exports = User;3.調(diào)用接口頁(yè)面(sever下面的router下面的index.js)
var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/UserSql.js');
var jwt_decode = require('jwt-decode');
const request = require('request')
router.post('/api/login', function(req, res, next) {
let code=req.body.ccode;//登陸傳過(guò)來(lái)的code
let nickName=req.body.nickName;
let avatarUrl=req.body.avatarUrl;
let appid = "自己小程序后臺(tái)管理的appid"; //自己小程序后臺(tái)管理的appid，可登錄小程序后臺(tái)查看
let mysecret = "小程序后臺(tái)管理的secret"; //小程序后臺(tái)管理的secret，可登錄小程序后臺(tái)查看
let grant_type = "authorization_code"; // 授權(quán)（必填）默認(rèn)值
//拼接出請(qǐng)求微信服務(wù)器的url地址然后請(qǐng)求oppenid和session_key
let url ='https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + mysecret + '&js_code=' + code + '&grant_type=authorization_code';
request(url,(error, response, body)=>{
//JSON.parse()方法將JSON格式字符串轉(zhuǎn)換為js對(duì)象
let parsData = JSON.parse(body.toString());
let openid=parsData.openid;
let session_key=parsData.session_key;
let params={
openid,
nickName,
avatarUrl
}
//查詢數(shù)據(jù)庫(kù)中有沒(méi)有此用戶
connection.query( user.queryUserName( params ) , function (error, results, fields) {
if( results.length > 0){
//數(shù)據(jù)庫(kù)中存在 : 讀取
connection.query( user.queryUserName( params ) , function (e, r) {
res.send({
data:r[0]
})
})
}else{
//數(shù)據(jù)庫(kù)中[不]存在 : 存儲(chǔ) ==>讀取
connection.query( user.insertData( params ) , function (er, result) {
connection.query( user.queryUserName( params ) , function (e, r) {
res.send({
data:r[0]
})
})
})
}
})
})
})總結(jié)
當(dāng)你想要設(shè)置一個(gè)頁(yè)面想要使用必須先登錄就在那個(gè)頁(yè)面的接口請(qǐng)求中加入token比如文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-490772.html
$http.request({
url:"/selectCart",
method:"POST",
header:{
token:true
}
}).then((res)=>{
this.initGetData(res);
}).catch(()=>{
uni.showToast({
title:'請(qǐng)求失敗',
icon:'none'
})
})
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-490772.html
到了這里，關(guān)于uniapp+node.js+mysql前后端微信小程序授權(quán)登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
