安装express-jwt
npm install express-jwt
npm install jsonwebtoken
配置jwt (index.js)
const jwt = require('express-jwt');
app.use(jwt({
secret: 'sfsws23s',
algorithms: ['HS256']
}).unless({
path: ['/api/login', '/api/reguser']
}));
生成token(login.js)
let token =
"Bearer " +
jwt.sign({ id: result[0].id }, "fdsggs", { expiresIn: "2h" });
登录接口(login.js)
router.post("/login", function (req, res) {
let { username, password } = req.body;
password = md5(password);
let sql = `select * from user where username='${username}' and password='${password}'`;
db(sql, (err, result) => {
if (err) throw err;
if (result.length > 0) {
let token =
"Bearer " +
jwt.sign({ id: result[0].id }, "fdsggs", { expiresIn: "2h" });
res.send({ status: 0, message: "登录成功", token });
} else {
res.send({ status: 1, message: "账号或密码错误" });
}
});
});
vue前端路由守卫限制
router.beforeEach(({name}, from, next) => {
if (localStorage.getItem('token')) {
if (name === 'login') {
next('/');
} else {
next();
}
} else {
router.push('/login')
}
});
vue组件内headers携带token方法 (一)
var that=this;
this.axios({
method:'get',
url:'http://localhost:3000/api/v1/courses',
headers:{
authorization:'Bearer '+window.localStorage.getItem('token')
}
}).then(result=>{
if(result.data.length>0){
that.courses=result.data;
}
})
vue组件内headers携带token方法 (二)设置axios拦截器
每次向后端请求携带 头信息
在 src/main.js 当中加上以下代码:
// http request 拦截器可选
axios.interceptors.request.use(
config => {
if (localStorage.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.Authorization = `Bearer ${localStorage.token}`
}
return config
},
err => {
return Promise.reject(err)
})
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response.status === 401) {
//输出授权失败错误信息
} else {
//输出其他错误信息
}
return Promise.reject(error)
}
)