2024年前端最全项目中的鉴权是如何实现的？(1)，阿里前端工程师面试手册

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

let decodeToken = null;

try { //防止假冒token解析報錯

decodeToken = jwt.decode(token,secret,‘HS256’);

} catch (err) {

res.status(401).send(“非法访问”); return;

}

let exp = decodeToken.exp; if(!exp){

res.status(401).send(“非法访问”);

}

let now = new Date().getTime();

if(exp>(now+time601000)){

res.send({code:‘401’,“errorMsg”:“授权超时”})

}

next();

}else{

res.status(401).send(“非法访问”);

}

},

/* 生成token*/

makeToken(){

let Token = null;

let payload = {

time:new Date().getTime(),

exp:this.makeExp(time)

}

Token = jwt.encode(payload,secret,HS256) return Token;

},

/生成token过期时间/

makeExp:function(time){

let stam = time601000;

}

}

server.js

let express = require(“express”);

let app = express();

let bodyParser = require(‘body-parser’);

let auth = require(‘./lib/auth.js’);

let chalk = require(‘chalk’); app.use(bodyParser.json()); app.post(‘/login’,function(req,res,next){

let Token = auth.makeToken();

res.json({result:“success”,token:Token},200)

});

app.use(‘*’,[auth.validate],function(req,res,next){

res.send(‘success’);

});

app.listen(‘9999’)

上面只是一个简单的token生成和校验，如果有需要可以根据实际需要进行逻辑处理

四、前端设计

使用vuex保存全局状态，并做数据持久化

vuex里面面定义token变量来表示用户是否登录，初始值为’’

import createPersistedState from ‘vuex-persistedstate’

export default new Vuex.Store({

state: {

token: ‘’,

},

mutations: {

setIsLogin(state, isLogin) { //登录成功调用

state.token = isLogin;

},

FedLogOut(state) { //退出登陆执行

state.token=‘’

}

}

actions,

getters,

plugins:[createPersistedState({ //vuex数据固化到本地缓存，数据持久化

storage: window.localStorage

})]

});

配置request请求拦截器

request请求拦截器：发送请求前统一处理，如：设置请求头headers、应用的版本号、终端类型等。

service.interceptors.request.use(

config => {

if (store.state.token) {

// 为请求头对象，添加token验证的Authorization字段

config.headers.Authorization = store.state.token;

}

return config

},

error => {

// do something with request error

console.log(error) // for debug

return Promise.reject(error)

}

)

response响应拦截器

response响应拦截器：有时候我们要根据响应的状态码来进行下一步操作，例如：由于当前的token过期，接口返回401未授权，那我们就要进行重新登录的操作。

service.interceptors.response.use(

response => {

Toast.clear()

const res = response.data

if (res.status && res.status !== 200) {

// 登录超时,token过期返回401，重新登录

if (res.status === 401) {

store.dispatch(‘FedLogOut’).then(() => {

router.replace({

path: ‘/login’

//登录成功后跳入浏览的当前页面

// query: {redirect: router.currentRoute.fullPath}

})

})

}

return Promise.reject(res || ‘error’)

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-owdPsCgG-1715571550493)]

[外链图片转存中…(img-VfSvnkpR-1715571550494)]

[外链图片转存中…(img-VOmsR6IY-1715571550495)]

[外链图片转存中…(img-6iR1UpHi-1715571550495)]