In der Spalte „Tutorial zur Uni-App-Entwicklung“ werden eine Reihe von Berechtigungsauthentifizierungsmethoden vorgestellt. Ich habe empfohlen:
Uni-APP-Entwicklungs-Tutorial 
Umgebungsbeschreibung Uni-APP Laravel 5.7 + jwt -auth 1.0.0
uni-applaravel 5.7 + jwt-auth 1.0.0
和一般设计表没有什么区别，如果是多平台小程序，通过 account_id 关联联合表。
CREATE TABLE `users` ( `u_id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '账号id', `u_username` varchar(15) NOT NULL DEFAULT '' COMMENT '手机号隐藏 ', `u_nickname` varchar(15) NOT NULL COMMENT '分配用户名', `u_headimg` varchar(200) DEFAULT NULL COMMENT '头像', `u_province` varchar(50) DEFAULT NULL, `u_city` varchar(50) DEFAULT NULL, `u_platform` varchar(30) NOT NULL COMMENT '平台：小程序wx,bd等', `u_mobile` char(11) NOT NULL COMMENT '手机号必须授权', `u_openid` varchar(100) DEFAULT NULL COMMENT 'openid', `u_regtime` timestamp NULL DEFAULT NULL COMMENT '注册时间', `u_login_time` timestamp NULL DEFAULT NULL COMMENT '最后登陆时间', `u_status` tinyint(3) unsigned NOT NULL DEFAULT '1' COMMENT '0禁用1正常', `account_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '平台联合id', PRIMARY KEY (`u_id`), KEY `platform` (`u_platform`,`u_mobile`) USING BTREE) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4;
一个较不错的 request 类 luch-request
unterscheidet sich nicht von der allgemeinen Designtabelle ist ein plattformübergreifendes Applet, die gemeinsame Tabelle ist über account_id verknüpft. 
import Request from './request';import jwt from '@/utils/auth/jwt.js'; // jwt 管理 见下文const http = new Request();const baseUrl = 'http://xxx'; // api 地址var platform = ''; // 登陆时需知道来自哪个平台的小程序用户// #ifdef MP-BAIDUplatform = 'MP-BAIDU';// #endif/* 设置全局配置 */http.setConfig((config) => {
config.baseUrl = baseUrl; //设置 api 地址
config.header = {
...config.header }
return config})/* 请求之前拦截器 */http.interceptor.request((config, cancel) => {
if (!platform) {cancel('缺少平台参数');}
config.header = {
...config.header,
platform:platform }
if (config.custom.auth) {
// 需要权限认证的路由 需携带自定义参数 {custom: {auth: true}}
config.header.Authorization = jwt.getAccessToken();
}
return config})http.interceptor.response(async (response) => { /* 请求之后拦截器 */
console.log(response);
// 如果是需要权限认证的路由
if(response.config.custom.auth){
if(response.data.code == 4011){
// 刷新 token
jwt.setAccessToken(response.data.data.access_token);
// 携带新 token 重新请求
let repeatRes = await http.request(response.config);
if ( repeatRes ) {
response = repeatRes;
}
}
}
return response}, (response) => { // 请求错误做点什么
if(response.statusCode == 401){
getApp().globalData.isLogin = false;
uni.showToast({icon:'none',duration:2000,title: "请登录"})
}else if(response.statusCode == 403){
uni.showToast({
title: "您没有权限进行此项操作，请联系客服。",
icon: "none"
});
}
return response})export {
http}Eine relativ gute Anfrageklasse luch-request unterstützt die dynamische Änderung von Konfigurationen und Interceptoren und ist im Uni-App-Plug-in-Markt zu finden .
import Vue from 'vue'import App from './App'import { http } from '@/utils/luch/index.js' //这里Vue.prototype.$http = http
Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({
...App})app.$mount()Global mount
// #ifndef H5const loginCode = provider => {
return new Promise((resolve, reject) => {
uni.login({
provider: provider,
success: function(loginRes) {
if (loginRes && loginRes.code) { resolve(loginRes.code) } else { reject("获取code失败") }
},
fail:function(){ reject("获取code失败")}
});
})}// #endifexport {
loginCode //登录获取code}3. js-Paket im Zusammenhang mit der Autoritätsauthentifizierung
authorize.js
Aus Platzgründen wird der vollständige Code nicht veröffentlicht werden nicht gebraucht ankommen. Beispiel: uni.checkSession(): Da jwt zum Übernehmen des Anmeldestatus des Applets verwendet wird, wird diese Methode derzeit nicht verwendet.
const tokenKey = 'accessToken';//键值const userKey = 'user'; // 用户信息// tokenconst getAccessToken = function(){
let token='';
try {token = 'Bearer '+ uni.getStorageSync(tokenKey);} catch (e) {}
return token;}const setAccessToken = (access_token) => {
try {uni.setStorageSync(tokenKey, access_token);return true;} catch (e) {return false;}}const clearAccessToken = function(){
try {uni.removeStorageSync(tokenKey);} catch (e) {}}// userinfoconst setUser = (user)=>{
try {uni.setStorageSync(userKey, user);return true;} catch (e) {return false;}}const getUser = function(){
try {return uni.getStorageSync(userKey)} catch (e) {return false;}}const clearUser = function(){
try {uni.removeStorageSync(userKey)} catch (e) {}}export default {
getAccessToken,setAccessToken,clearAccessToken,getUser,setUser,clearUser}jwt.js
ist speziell für die Verwaltung von access_token mit wenig Code konzipiert und integriert auch die Verwaltung von Benutzerinformationen.
import {loginCode} from '@/utils/auth/authorize.js';import jwt from '@/utils/auth/jwt.js';import {http} from '@/utils/luch/index.js';const login=function(detail){ return new Promise((resolve, reject) => { loginCode().then(code=>{ detail.code = code; return http.post('/v1/auth/login',detail); }) .then(res=>{ jwt.setAccessToken(res.data.data.access_token); jwt.setUser(res.data.data.user); getApp().globalData.isLogin = true; resolve(res.data.data.user); }) .catch(err=>{ reject('登陆失败') }) })}export default {login}Nach dem Login kopieren
kümmert sich nur um die Anmeldung, warum in eine separate Datei legen, sonst nichts, weil es überall verwendet wird
<?phpnamespace App\Http\Middleware;use App\Library\Y;use Closure;use Exception;use Tymon\JWTAuth\Exceptions\JWTException;use Tymon\JWTAuth\Http\Middleware\BaseMiddleware;use Tymon\JWTAuth\Exceptions\TokenExpiredException;class ApiAuth extends BaseMiddleware{
public function handle($request, Closure $next, $guard = 'api')
{
// 在排除名单中 比如登录
if($request->is(...$this->except)){
return $next($request);
}
try {
$this->checkForToken($request);// 是否携带令牌
if ( $this->auth->parseToken()->authenticate() ) {
return $next($request); //验证通过
}
}catch(Exception $e){
// 如果token 过期
if ($e instanceof TokenExpiredException) {
try{
// 尝试刷新 如果成功 返给前端 关于前端如何处理的 看前边 index.js
$token = $this->auth->refresh();
return Y::json(4011, $e->getMessage(),['access_token'=>$token]);
}catch(JWTException $e){
// 达到刷新时间上限
return Y::json(401, $e->getMessage());
}
}else{
// 其他各种 直接返回 401 状态码 不再细分
return Y::json(401, $e->getMessage());
}
}
}
protected $except = [
'v1/auth/login',
];}4. Laravel-Authentifizierungs-Middleware
<template>
<view>
<button>获取手机号</button>
<button>获取用户数据</button>
<button>清除用户数据</button>
</view></template><script>
import auth from '@/utils/auth/auth.js';
import jwt from '@/utils/auth/jwt.js';
var _self;
export default{
data() {return {}},
onLoad(option) {},
onShow(){},
methods: {
decryptPhoneNumber: function(e){
// console.log(e.detail);
if( e.detail.errMsg == "getPhoneNumber:ok" ){ //成功
auth.login(e.detail);
}
},
me: function(){
this.$http.get('/v1/auth/me',{custom: {auth: true}}).then(res=>{
console.log(res,'success')
}).catch(err=>{
console.log(err,'error60')
})
},
clear: function(){
jwt.clearAccessToken();
jwt.clearUser();
uni.showToast({
icon: 'success',
title: '清除成功',
duration:2000,
});
}
},
components: {}
}</script><style></style>Der Autor ist der Meinung, dass diese Art der Aktualisierung sehr schwierig zu verwalten ist. Es ist besser, sich nach Ablauf erneut anzumelden Im Allgemeinen ist keine hohe Sicherheit erforderlich. Bei der nächsten https-Anfrage ist es besser, ein einmaliges Token zu verwenden. Die Middleware benötigt hier nur auth()->check() , false bedeutet nicht angemeldet.
5. Rufen Sie die Mobiltelefonnummer ab, um sich anzumelden , die Methode, die ich verwende, ist, Nachdem das Backend festgestellt hat, dass das Token abgelaufen ist, versucht es automatisch, es zu aktualisieren. Wenn die Aktualisierung erfolgreich ist, wird ein neues Token zurückgegeben. Im Antwort-Interceptor erfasst das Front-End den vereinbarten Code der Back-End-Antwort, speichert das neue Token stellt dann eine zweite Anfrage. Am Ende wird es als eine normale Anfrage wahrgenommen.
Eine andere Denkweise besteht darin, dass sich das Backend nach einem erfolgreichen Aktualisierungsversuch automatisch für den aktuellen Benutzer anmeldet und das neue Token im Header zurückgibt. Das Frontend ist nur für die Speicherung verantwortlich.其实思路也很简单，非前后端分离怎么做的，前后端分离就怎么做，原理一样。非前后端分离，在每次请求时都会读取 session ，那么前后端分离，更好一些，有些公开请求不走中间件，也就无需判断登陆态，只有在需要权限认证的页面，在页面初始化时发出一次请求走中间件，以此判断登陆状态。
定义全局登陆检查函数
import jwt from '@/utils/auth/jwt.js';Vue.prototype.checkLogin = function(){
var TOKEN = jwt.getAccessToken();
return new Promise((resolve, reject) => {
if(TOKEN){
http.get('/v1/auth/check',{custom: {auth: true}}).then(res=>{
// 通过中间件 一定是登陆态
resolve(true);
}).catch(err=>{
resolve(false);
console.log(err) // 这里是401 403 后端500错误或者网络不好
})
}else{
resolve(false) //没有token 一定是未登陆
}
})}笔者最终放弃上面的这种检查登录的方式，直接检验storage中有user和token即视为登录状态。以被动的验证代替主动去验证，就是说用户执行一个请求，返回401，那么就改变登录状态。以后再补充。
前端
<script>
export default {
data() {
return {
isLogin:null
}
},
onLoad() {
this.checkLogin().then(loginStatus=>{
this.isLogin = loginStatus;
});
},
methods: {
},
components: {}
}</script>
Das obige ist der detaillierte Inhalt vonUni-App-Applet Laravel+JWT-Autoritätsauthentifizierungsserie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Mini-Programmpfaderfassung
So zentrieren Sie ein Div in CSS
So verwenden Sie die Sortierfunktion
Photoshop CS5 Seriennummer
virtuelle digitale Währung
Kopfzeile entfernen
Welche virtuellen Währungen könnten im Jahr 2024 stark ansteigen?
Was sind die Voraussetzungen für die Eröffnung eines Digitalwährungskontos? Ist es frei?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
