Is there a posibility to send data with redirect inside getServerSideProps function similar way as in next.config.js (you cannot pass hidden queries as far as I know inside next config file).
export const getServerSideProps = async (context) => {
const id = context.params.id;
return {
redirect: {
destination: '/my-work',
permanent: false,
has: [
{
type: 'query',
value: id
}
]
},
props: {
}
}
}
I want to pass hidden query to another page so this only works as middleware redirection as I am comming on this page from email template. But has object is not working in getServerSideProps function.
Is there any other ways to achieve that?
Thanks for your help!
This is from the official documentation.
module.exports = {
async redirects() {
return [
// if the header `x-redirect-me` is present,
// this redirect will be applied
{
source: '/:path((?!another-page$).*)',
has: [
{
type: 'header',
key: 'x-redirect-me',
},
],
permanent: false,
destination: '/another-page',
},
// if the source, query, and cookie are matched,
// this redirect will be applied
{
source: '/specific/:path*',
has: [
{
type: 'query',
key: 'page',
// the page value will not be available in the
// destination since value is provided and doesn't
// use a named capture group e.g. (?<page>home)
value: 'home',
},
{
type: 'cookie',
key: 'authorized',
value: 'true',
},
],
permanent: false,
destination: '/another/:path*',
},
// if the header `x-authorized` is present and
// contains a matching value, this redirect will be applied
{
source: '/',
has: [
{
type: 'header',
key: 'x-authorized',
value: '(?<authorized>yes|true)',
},
],
permanent: false,
destination: '/home?authorized=:authorized',
},
// if the host is `example.com`,
// this redirect will be applied
{
source: '/:path((?!another-page$).*)',
has: [
{
type: 'host',
value: 'example.com',
},
],
permanent: false,
destination: '/another-page',
},
]
},
}
You can compare the params with it. For more details, visit here
Related
I'm trying to build a simple app showing invoices.
When I create a new invoice, the path is invoice/new
When a change happens, I want to redirect to the newly created invoice
export const action = async ({ request, params }) => {
const newInvoice = // save the invoice
if (params.invoiceId === "new") {
return redirect(`/invoice/${newInvoiceId}`);
}
return { ok: true };
};
But it's not redirecting - it stays in /invoice/new
export const loader = async ({ params }) => {
const invoiceId = params.invoiceId;
console.log("invoiceId", invoiceId); // invoiceId always 'new' even after `redirect`
const invoice = // fetch invoice if invoiceId !== 'new'
return { invoice };
};
I don't understand why...
Here is my router
const router = createMemoryRouter(
[
{
path: "/",
element: <Root />,
children: [
{
path: "/",
element: <Home />,
loader: homeLoader,
},
],
},
{
path: "/invoice/:invoiceId",
element: <Invoice />,
loader: invoiceLoader,
action: invoiceAction,
},
{
path: "/client/:clientId",
element: <Client />,
loader: clientLoader,
action: clientAction,
},
],
{
initialEntries: ["/", "/invoice/new"],
},
);
I can give more clue if needed, of course
i'm trying to retrieve item data by id in angular 14, I tried adding the id to the route (:id), and then created the service method and tried to implement it in the component ts page. Whenever I add the (:id) to the route in the routing page, I get the following error:
ERROR TypeError: Cannot read properties of null (reading 'getContext')
this is my routing page:
const routes: Routes = [
{
path: '',
children: [
{
path: 'missions-list',
component: ListMissionsComponent,
data: { title: 'Missions' },
},
{
path: 'mission-details/:id',
component: MissionDetailsComponent,
data: { title: 'Détails du mission' },
},
{
path: 'add-mission',
component: AddMissionComponent,
data: { title: 'Ajouter une mission' },
},
],
},
];
and this is my service method:
getById(id: number): Observable<Mission> {
return this.http.get(`${baseUrl}/${id}`);
}
and finally my ts page:
ngOnInit(): void {
this.getMissionById(this.activatedRoute.snapshot.params['id']);
}
getMissionById(id: any): void {
this.missionService.getById(id)
.subscribe({
next: (data) => {
this.mission = data;
console.log(data);
},
error: (e) => console.error(e)
});
}
can anyone help me out in solving this error? I'd appreciate it a lot!
I tried the service method without passing the id in the route, just by setting 1 as an input for the method and it works pretty fine!
To redirect from one page to another in a nextjs app update next.config.js
module.exports = {
async redirects() {
return [
{
source: '/shop',
destination: '/',
permanent: true,
},
]
},
}
Can you redirect from a subdomain within the next.config.js? Something like:
module.exports = {
async redirects() {
return [
{
source: 'shop.mydomain.com',
destination: '/shop',
permanent: true,
},
]
},
}
I am an engineer who makes web systems in Tokyo.
I'm making a search system using Grid.js, but I faced a problem.
I don't know the solution because it's not in the documentation.
Since this system uses Vue 2.x, it uses axios.post with Custom HTTP Requset.
I was able to get the list, but I'm having trouble implementing sorting, pagination, and keyword search.
I want to send parameters by Post request.
Please tell me how to implement this.
The code is below
data() {
return {
columns: [
{name: 'user name', id: 'user_name'},
{name: 'email', id: 'email'},
],
page: {
enabled: true,
limit: 100,
server: {
body: (prev, page) => {
console.log(page) // OK, show page number 0,1,2...
return {
page: page
}
}
},
},
sort: {
},
search: {
server: {
// url: (prev, keyword) => `${prev}?q=${keyword}`
// what's this.
}
},
server: {
url: '/api/v2/users/list',
method: 'POST',
async data (opt) {
let response = await axios.post(opt.url)
return {
data: response.data.results.map(item => {
return {
username: item.username,
email: item.email,
}
}),
total: response.data.count,
}
}
},
};
OK.
Set POST payload this.
data() {
return {
columns: [
{name: 'user name', id: 'user_name'},
{name: 'email', id: 'email'},
],
page: {
enabled: true,
limit: 100,
server: {
body: (prev, page) => {
console.log(page) // OK, show page number 0,1,2...
return {
page: page
}
}
},
},
sort: {
},
search: {
server: {
// url: (prev, keyword) => `${prev}?q=${keyword}`
// what's this.
}
},
server: {
url: '/api/v2/users/list',
method: 'POST',
body: {},
async data (opt) {
let response = await axios.post(opt.url)
return {
data: response.data.results.map(item => {
return {
username: item.username,
email: item.email,
}
}),
total: response.data.count,
}
}
},
};
I want to access the $auth object in the context from the js defined under 'plugins/', but I can't.
https://auth.nuxtjs.org/api/auth.html#auth
This module globally injects $auth instance, meaning that you can access it anywhere using this.$auth. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$auth
It is described above, but my code (axios-interceptor.js) cannot access $auth from context (it is undefined).
What does it take to be able to access it?
plugins/axios-interceptor.js
export default function (context) {
const { $axios, route, redirect } = context
$axios.interceptors.response.use(
function (response) {
return response
},
function (error) {
const code = parseInt(error.response && error.response.status)
const thisRoutePath = route.path
if ([401, 403].includes(code)) {
if (thisRoutePath !== '/') {
redirect('/?login')
}
}
return Promise.reject(error)
}
)
}
nuxt.config.js
export default {
plugins: [
'#/plugins/axios-interceptor.js'
],
modules: [
'#nuxtjs/axios',
'#nuxtjs/proxy',
'#nuxtjs/auth'
],
axios: {
baseURL: BASE_URL
},
auth: {
cookie: false,
autoFetchUser: false,
redirect: {
login: '/login',
logout: '/login',
callback: '/callback',
home: '/home'
},
strategies: {
local: {
endpoints: {
login: { url: BACKEND_API_PATH_BASE + '/api/v1/login/', method: 'post', propertyName: 'token' },
user: { url: BACKEND_API_PATH_BASE + '/api/v1/users/me', method: 'get', propertyName: false },
logout: false
},
},
}
},
router: {
middleware: [
'auth'
]
},
The reason I want to access $auth in axios-interceptor.js is that I want to execute $auth.logout() in the if ([401, 403].includes(code)) { block and remove the token.
I am now able to access $auth by doing the following
export default {
// plugins: [
// '#/plugins/axios-interceptor.js' ########### REMOVE ###########
// ],
:
(Ommit)
:
auth: {
:
(Ommit)
:
plugins: [
'#/plugins/axios-interceptor.js' // ########### ADD ###########
]
},
(Ommit)
:
}
The things I needed to do were listed below.
https://auth.nuxtjs.org/recipes/extend.html